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
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)
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.
<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
Loading ...
En el tintero – Vol.2 | ZaRQuN.com
04-06-2008
Permalink
[...] bonitos mediante CSS Xyberneticos nos pone en la pista de Beautiful CSS buttons with icon set que son unos tips muy prácticos para [...]