Leyendo Xyberneticos me encuentro este util tip para nuestros proyectos web. Mediante Css podemos crear bonitos botones para nuestra web mediante la utilización de un pack de iconos. El código HTML seria tan simple como:
<a href=“#” class=“button”>
<span class=“add“>Add to your bookmark</span>
</a>
<span class=“add“>Add to your bookmark</span>
</a>
Donde class=”add” hace referencia a la siguiente clase CSS:
.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
El codigo CSS para el button seria:
a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}
Con este simple código, ya podríamos implementar el botón con la imagen “add”, crear el resto de botones seria similar. Mejor, descargáis el ejemplo en los enlaces siguientes:
Enlace | woork
Enlace | Pack de iconos
Enlace | Codigo de ejemplo
Fuente | Unbuntu Life
Cargando tuits...