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:
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:
HTML:
Ejemplo:
HOME Post Original
www.elserver.com
Hosting Web 2.0 - La Empresa que sobrepasa todas las expectativas...
www.slicercss.com
Tus diseños en PSD a archivos XHTML y CSS validos
www.Tilidom.com
Almacenar toda tu informacion, incluyendo fotos, videos y musica.
Italo
25 - 05 - 2007
Permalink
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
25 - 05 - 2007
Permalink
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
25 - 05 - 2007
Permalink
Muy bueno Nikko, me parece que lo voy a tener que poner en practica, jeje
Nikko
25 - 05 - 2007
Permalink
Italo : Gracias por tu comentario ^_^
Nikko
25 - 05 - 2007
Permalink
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
25 - 05 - 2007
Permalink
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
25 - 05 - 2007
Permalink
Che, sos fanatico del "^_^"... jaja
GeekLog | PuntoGeek
25 - 05 - 2007
Permalink
[...] Botones atractivos con CSS [...]
Nikko
25 - 05 - 2007
Permalink
jajaj te diste cuenta..yo tambien me he dado cuenta..es natural ahora..jaja salutes
PD1: ^_^
PD2: jaja
leumas
25 - 05 - 2007
Permalink
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
25 - 05 - 2007
Permalink
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!