Botones bonitos mediante CSS
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
-
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)
-
.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.
Mas informacion Beautiful CSS buttons with icon set
En el tintero – Vol.2 | ZaRQuN.com said,
Wrote on June 8, 2008 @ 8:51
[...] bonitos mediante CSS Xyberneticos nos pone en la pista de Beautiful CSS buttons with icon set que son unos tips muy prácticos para [...]