O que acha dessa ideia?
Quando a classe .active
é adicionada, um ícone do Glyphicons (padrão do Bootstrap) é inserido ao botão através do seletor ::after
do CSS.
.btn-default.amarelo
{
background: yellow;
}
.btn-default.amarelo:hover
{
background: rgb(240, 240, 0);
}
.btn-default.amarelo.active,
.btn-default.amarelo:active
{
background: rgb(230, 230, 0) !important;
}
.btn-default.laranja
{
background: orange;
}
.btn-default.laranja:hover
{
background: rgb(255, 140, 0);
}
.btn-default.laranja.active,
.btn-default.laranja:active
{
background: rgb(255, 125, 0) !important;
}
.btn-default.vermelho
{
background: red;
}
.btn-default.vermelho:hover
{
background: rgb(240, 0, 0);
}
.btn-default.vermelho.active,
.btn-default.vermelho:active
{
background: rgb(230, 0, 0) !important;
}
.btn-default.active::after
{
font-family: 'Glyphicons Halflings';
font-size: 12px;
content: '\e013';
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<h1>Nível de gravidade</h1>
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" value="B" checked autocomplete="off"> Branco
</label>
<label class="btn btn-default amarelo">
<input type="radio" value="A" autocomplete="off"> Amarelo
</label>
<label class="btn btn-default laranja">
<input type="radio" value="L" autocomplete="off"> Laranja
</label>
<label class="btn btn-default vermelho">
<input type="radio" value="V" autocomplete="off"> Vermelho
</label>
</div>
</div>
</div>