
Beautiful CSS buttons with icon set – otro agradable y practico tips para diseñar botones simples y atractivos para tus proyectos Web. Este tutorial muestra los pasos para llegar a crear con algunas líneas de código HTML y CSS botones llamativos a los cuales se le añadirán mediante la utilización de diversas “clases” iconos relacionados a la sección que nos redireccionara.
Descarga Ejemplos - Mas info woork
Uso
Código CSS Botón contenedor
Este es el código CSS para crear el botón "contenedor", que incluirá el fondo y la forma que el botón llevara y donde se definirá el tipo de letra, anchura, altura, etc
CSS:
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;
}
Código CSS para añadir clases (o diversos iconos)
CSS:
.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
...etc...etc...etc
Html: Añadir nuestros botones definiendo clases para conseguir diversos diseños.
HTML:
<a href="#" class="button">
<span class="delete">Delete this bookmark
</span>
</a>
<a href="#" class="button">
<span class="user">Add to friends</span>
</a>
Mas informacion Beautiful CSS buttons with icon set