El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

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:

CSS, Codigo

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

3 Respuestas a “Botones simples con CSS”

Agrega tu comentario

  1. Diseño Web dice:

    Interesante aporte aunque me gustaría que me amplien mayor información sobre los diferentes botones que se pueden hacer con CSS

  2. Diseño Web dice:

    Gracias por el tutorial, lo pusimos en práctica y salio a la perfección.

Trackbacks/Pingbacks

  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 [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 3 años. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna