Botones atractivos con CSS

Oscar Alexander nos muestra como de una forma muy sencilla podremos lograr botones muy atractivos para los enlaces de nuestro post. Para ello se utilizara dos imágenes:

La utilización de dos imágenes es para lograr botones flexibles que se adapten con el tamaño del texto, para ello se usa la técnica de las puertas deslizantes.
Primero que nada descargamos las imágenes que utilizaremos, y las copiamos en nuestra carpeta "images" de nuestro theme.

Luego introducimos en nuestra hoja de estilo (style.css) lo siguiente:

PLAIN TEXT

CSS:

a.button {
background: transparent url(images/bg_button_a.gif) no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url(images/bg_button_span.gif) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}

Cuando desees utilizar estos botones para los link de tus post. Primero recuerda seleccionar en tu barra de herramientas el modo visual “CODE”.

Ahora si, para darle este aspecto a nuetros link lo hacemos de esta forma:

PLAIN TEXT

HTML:

<a href="http://www.xyberneticos.com/" onclick="this.blur();" class="button"><span>HOME</span></a>

Ejemplo:
HOME Post Original

Compartelo

Italo said,

Wrote on May 25, 2007 @ 20:16

Excelente el diseño del blog y de los contenidos.....ni que hablar! felicitaciones!
(Entrada editada por informacion privada para xyberneticos y muestra de mail de usuario)
Aikora said,

Wrote on May 25, 2007 @ 21:12

Esta muy bueno el resultado final, bastaría sustituir las imagenes para personalizar un poco más si se desea. Desde que descubri tu blog y el material de CSS que pones, no puedo evitar probarlo en alguna parte de mi sitio jeje. Greetings mate.
juanguis said,

Wrote on May 26, 2007 @ 12:58

Muy bueno Nikko, me parece que lo voy a tener que poner en practica, jeje
Nikko said,

Wrote on May 27, 2007 @ 4:28

Italo : Gracias por tu comentario ^_^
Nikko said,

Wrote on May 27, 2007 @ 4:37

Aiko : Tal cual el resultado es bastante bueno. Si bien es sencillo le da un estilo muy bello a los link..Definitivamente me ha agrado..y mucho...
Me agrada también que te guste el material, sobre todo como dices tu sobre CSS..eso si..si llegas a hacer macanas en tu blog, por favor no me eches la culpa ¿de acuerdo? jaja
salutes..gracias por esa onda positivas que depositas siempre en tus comentarios
Nikko said,

Wrote on May 27, 2007 @ 4:39

Juanguis : deberas que si ^_^ como dije le da un aspecto muy agradable a los enlaces...seguro se veria bien de bello en .G...
un abrazo Amigo !!
PD: No seas vago che, y pruebalo !!!!!ja
juanguis said,

Wrote on May 27, 2007 @ 17:28

Che, sos fanatico del "^_^"... jaja
GeekLog | PuntoGeek said,

Wrote on May 27, 2007 @ 17:29

[...] Botones atractivos con CSS [...]
Nikko said,

Wrote on May 28, 2007 @ 1:40

jajaj te diste cuenta..yo tambien me he dado cuenta..es natural ahora..jaja salutes
PD1: ^_^
PD2: jaja
leumas said,

Wrote on September 22, 2007 @ 8:58

Hola, no consigo hacerlo funcionar. Subo las imagenes como dice, pego el codigo en style.css y el link como dice ahi y no me sale el boton, creo que lo hago todo bien, ¿alguien me ayuda? Gracias
Ferran said,

Wrote on February 18, 2008 @ 7:31

Este sistema me parece muy efectivo, pero dime una cosa, cuando te planteas que los botones esten centrados como te lo haces, porque todo depende del float del a y no amdite center.

Alguna idea?

Muchas gracias!