css drawn 6-points star place inside the Button link - css

Question

I found a code drawing a 6-point star:
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
now I need to place this picture inside the Button element.
should look like a real button with 6-point start on the left side.
|*Button| Like this :)

Answer 1

Try including a div inside of a tag - something like this code here:
<button onclick="sayHello();"><div id="star-six"> </div></button>
http://jsfiddle.net/53mHn/
Updated:
If you want the star on the left, create two divs inside of your button, one for the star and one for your text. Set the width of the star div to be 50px (or whatever the star width is) and set the float: to left.
<button onclick="sayHello();"><div class="star-content star-icon" id="star-six"> </div><div class="star-content">This is the text inside of my button</div></button>
Css is here:
.star-icon {
width: 50px;
float: left;
}