I have an empty-star button like this,
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
When I click it, I want the inner color to change to yellow like shown here - .png
How can we achieve this using Bootstrap and Javascript?
Here's a link to what I've got so far - ,output
I have an empty-star button like this,
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
When I click it, I want the inner color to change to yellow like shown here - http://s21.postimg/3qwgsnrcj/star.png
How can we achieve this using Bootstrap and Javascript?
Here's a link to what I've got so far - http://jsbin./refatelefi/edit?html,output
Share Improve this question asked Apr 2, 2016 at 19:40 Kemat RochiKemat Rochi 9523 gold badges23 silver badges37 bronze badges 3- 1 @Paulie_D It's possible, but it's a bit nasty. What OP has to do: add another star (with JS) when clicked on the button. See jsfiddle/066bkv87 – Roy Commented Apr 2, 2016 at 19:48
- 1 I meant with CSS...anything is possible with JS – Paulie_D Commented Apr 2, 2016 at 19:51
- @Paulie_D Check. Luckily OP can use JS. – Roy Commented Apr 2, 2016 at 19:55
3 Answers
Reset to default 5A glyphicon is like a character. You can change it's color by changing the color property of the span style.
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
.glyphicon-star-empty {
color: yellow;
}
However, the icon you picked is not full, so you can't change the inside as you asked. I would remend using the "glyphicon glyphicon-star" instead.
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star"></span>
</button>
.glyphicon-star {
color: yellow;
}
You may use a full icon and color then redraw the outside via text-shadow with black or any other color.
.glyphicon-star {
color: yellow;
text-shadow:0 0 black,0 0 black,0 0 black,0 0 black,0 0 black;
}
.bis.glyphicon-star {
text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black ;
}<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star"></span>
</button>
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star bis"></span>
</button>I am not sure about getting it exactly similar to your star.png, while you can use javascript to set css color property on the button or you might want to use background-color property. Here is a simple demo http://jsbin./netufaruxa/1/edit?html,js,output
HTML:
<body>
<button id="myBtn" type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
</body>
JS:
function colorChange(){
if(document.getElementById("myBtn").style.color==""){
document.getElementById("myBtn").style.color="yellow";
}else{
document.getElementById("myBtn").style.color="";
}
}
(function() {
document.getElementById("myBtn").addEventListener("click", colorChange);
})();