Botones simples con CSS
Supongo que te sonarán estos botones
En este caso son de Google Calendar pero pueden verse muchos por la red. La mayoría de ellos están creados con imágenes pero existe un método sencillo de crearlos con CSS.
.feed {
margin:4px;
border:1px solid;
border-color:#F4A460 #000000 #000000 #FF6600;
padding:0 3px;
background:#FF6600;
font:bold 10px verdana,sans-serif;
color:#FFFFFF;
text-decoration:none;
}En el documento utilizaríamos algo así:
<a href="/xml/" class="feed">XML</a>
Que se vería:
Un par de cambios y ¡voilá!
Si, además queremos darle un efecto “hover” podríamos usar algo así:
a.feed:link, a.feed:active {
margin: 2px;
border: 1px solid;
border-color: #F4A460 #000000 #000000 #FF6600;
padding: 0px 3px 0px 3px;
background: #FF6600;
font: bold 10px verdana, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
a.feed:hover, a.feed:active{
margin: 2px;
border: 1px solid;
border-color: #F4A460 #000000 #000000 #FF6600;
padding: 0px 3px 0px 3px;
background: #FF6600;
font: bold 10px verdana, sans-serif;
color: #FFFF00;
text-decoration: none;
}Entre las ventajas de este método destacan sin duda:
- Es un método totalmente accesible
- Podemos cambiar el aspecto de los botones de nuestra página sin tener que crear imágenes nuevas cada vez
- Las imágenes, por muy optimizadas que estén añaden peso a nuestra página, así que sustituirlas por CSS nos puede ayudar a aligerar un poco más la carga
Y como ya os habréis dado cuenta, de esta misma forma con un poco más de trabajo podremos obtener resultados excelentes, como ejemplo estos tres enlaces, en inglés:
