Me gustaria poder crear un menu con botones como este. La idea es utilizar usar imágenes de un sprite.
¿Como podría añadirle a la imagen del sprite el fondo redondo de color?
Ya he encontrado la solución. Os dejo el codigo para quien le sirva.
Este será el boton en HTML:
<div class="boton"><a class="burguer" href="#"></a></div>
Luego el estilo será el siguiente:
.boton{
width:60px;
height:60px;
background-color:#03800b;
margin: 5px;
padding:10px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
font-size:11px;
line-height:32px;
text-transform: uppercase;
float:left;
display: flex;
justify-content: center;
align-items: center;
}
.boton:hover{
opacity: 0.50;
-moz-opacity: .50;
filter:alpha (opacity=50);
}
Con eso tenemos un circulo con el fondo verde.
Ahora nos queda añadirle dentro la imagen que proviene de un sprite:
.boton .burguer{
width: 32px; height: 32px;
background: url('/sprites1.png') -10px -10px;
margin-top: 10px;
text-align: center;
display: inline-block;
margin:0px auto;
}
Y de esta forma, tenemos un botón usando una imagen de un sprite.