El Comercio Digital

Webmaster Libre

Subtitulo del blog

Botones simples con CSS

Supongo que te sonarán estos botones

Botones RSS en Google Calendar

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:

XML

Un par de cambios y ¡voilá!

ICAL

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:

  1. Es un método totalmente accesible
  2. Podemos cambiar el aspecto de los botones de nuestra página sin tener que crear imágenes nuevas cada vez
  3. 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:

Otras entradas

Esta entrada fue publicada por Alma Fernández el Viernes, 9 de Junio de 2006 y está archivada en: CSS, Codigo. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

1 Comentario

Agrega el tuyo
  1. [...] Usar CSS en vez de imágenes para hacer botones: [ws] Inline Buttons (2.0) The CSS XML / RSS Button 3-d push button effect Webmaster: CSS Button Webmaster Libre » Botones simples con CSS [...]

    Juglar :: Botones :: June :: 2006 16 Junio, 2006

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)