Vamos a crear botones con CSS a partir de enlaces, sin utlizar formularios, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a los botones. El efecto que lograremos será que al pasar el cursor del mouse por encima de un enlace, éste parezca como que está pulsado. | Para ver el enlace en funcionamiento click aquí ►► |  |
1.- Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Vamos a definir la clase enlaceboton, que es el estilo que se asignará para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado. Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código CSS:
.enlaceboton { font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-weight: bold;
padding: 4px;
background-color: #424242;
color: #666666;
text-decoration: none;
}
.enlaceboton:link,
.enlaceboton:visited {
border-top: 1px solid #cccccc;
border-bottom: 2px solid #666666;
border-left: 1px solid #cccccc;
border-right: 2px solid #666666;
}
.enlaceboton:hover {
border-bottom: 1px solid #cccccc;
border-top: 2px solid #666666;
border-right: 1px solid #cccccc;
border-left: 2px solid #666666;
}
body {font-family:arial;font-size:15;font-weight:bold}
td {font-family:arial;font-size:15;font-weight:bold} |
En el anterior código hemos resaltado: - En amarillo: El tamaño de los caracteres del título del enlace.
- En verde: El espacio entre los bordes y el texto.
- En rojo: El color del fondo del botón.
- En azul: Los colores de los bordes del botón.
3.- Al enlace le hemos asignado una clase definida con el código CSS anterior y será nuestro código HTML: <a href="#" class="enlaceboton">Título del enlace</a> |
...que pondremos en donde normalmente colocamos enlaces en nuestro blog: gadgets o entradas (reemplazamos # por la URL del enlace). |
2 comentarios :
està buenisimo pero cuando lo hice me salen cuadrados y no redondeado como el "demo" ni en degradè :( porfa ayudame!! SON LO MÀS!
AtipikaGirl: Creo que tienes una pequeña confusión; El botón de la Demo no es al que se refiere el tutorial, es ahí en donde debes hacer click para ver en funcionamiento el botón que se enseña a crear en el tutorial.
Para crear botones con esquinas redondeadas y degradé aquí encuentras una buena herramienta:
http://jirox.net/AsButtonGen/
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.