Como crear botones personalizados con HTML y CSS
Como crear botones personalizados con HTML y CSS
En este articulo, explicaremos como realizar botones a partir de etiquetas <a>. Lo que vamos a intentar es crear un botón a partir de dos imágenes creadas por nosotros. Y decimos dos imágenes porque gracias a estas, conseguiremos que el botón se adecue al tamaño del texto asignado a el. El efecto final seria el siguiente:
Empezamos diseñando la apariencia de nuestros botones, para ello, creamos tres imágenes en PhotoShop una para el botón en estado normal y otra para el estado al pasar con el ratón por encima por encima.
Ahora, vemos cual es el código HTML que tenemos que asignar para crear nuestro botón:
<a class="button" href="#" onclick=”#”><span>Bring world peace</span></a>
Como veis, se trata de una etiqueta <a> y dentro de esta un <span>. Entonces, con la ayuda de ccs vamos a definir las propiedades de estas etiquetas para que se conviertan en un botón. Aparte, de otras propiedades lo que debemos entender es que asignaremos una imagen de fondo a cada una de estas etiquetas. Para ello, cogemos las imágenes anteriores y las partimos de la siguiente manera:
<span> <a>
Llegados a este punto solo nos queda crear el CSS.
Primero, definimos las propiedades del botón en estado normal.
.clear { /* contenedor para los botones flotantes */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url(‘bttn_right.jpg’) 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; /* no debe sobrepasa la anchura de la imagen que utilizamos arriba */
text-decoration: none;
}
a.button span {
background: transparent url(‘bttn_left.jpg’) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Explicamos un poco el código CSS:
La clase .clear es un contenedor para los botones, para que no alternen la apariencia de nuestra pagina los incluimos en una div con la clase .clear.
La clase button fija la imagen de fondo como la imagen de la parte derecha del botón. Establece la altura del botón, en nuestro caso, 24px. Y lo convierte en un bloque que flota hacia la izquierda. Importante, el padding-right no debe superar la anchura de nuestra imagen, ya que de ser así el botón saldría partido.
Por último, la clase button span fija como imagen de fondo la parte izquierda del botón y otras propiedades.
Este seria el resultado:
Si queremos aplicar el efecto hover, solo tenemos que incorporar el siguiente código:
a.button:hover {
background: transparent url(’bttn_right_hover.jpg’) no-repeat scroll top right;
color: #212121;
outline: none; /* Elimina la linia de puntos Firefox */
}
a.button:hover span {
background: transparent url(’bttn_left_hover.jpg’) no-repeat;
}
Obteniendo el siguiente efecto:
Botones avanzados:
Si nos gusta diseñar cosas un poco más complicadas, podemos caer en la necesidad de crear botones tipo:
Es un poco más complejo pero seguro que no tenéis muchos problemas para interpretar el código:
HTML:
<div class="clear"><a class="button-left icon-ok" href="#" onclick="javascript:;"><span>Aceptar</span></a><a class="button-left icon-down" href="#" onclick="javascript:;"><span>Estadísticas</span></a><a class="button-left icon-cancel" href="#" onclick="javascript:;"><span>Cancelar</span></a><a class="button-right" href="#" onclick="javascript:;"><span class="icon-bef">Anterior</span></a><a class="button-left icon-seg" href="#" onclick="javascript:;"><span>Siguiente</span></a></div>
CSS:
a.button-left {
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 24px; /* no debe sobrepasa la anchura de la imagen que utilizamos arriba */
text-decoration: none;
}
a.button-left span {
background: transparent url(’bttn_left.jpg’) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 10px;
}
a.button-right {
background: transparent url(’bttn_right.jpg’) no-repeat top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 10px; /* no debe sobrepasa la anchura de la imagen que utilizamos arriba */
text-decoration: none;
}
a.button-right span {
display: block;
line-height: 14px;
padding: 5px 0 5px 24px;
}
.icon-seg{ background: transparent url(’bttn_right_sig.jpg’) no-repeat top right;}
.icon-bef{ background: transparent url(’bttn_left_bef.jpg’) no-repeat top left;}
.icon-ok{ background: transparent url(’bttn_right_ok.jpg’) no-repeat top right;}
.icon-cancel{ background: transparent url(’bttn_right_cancel.jpg’) no-repeat top right;}
.icon-down{ background: transparent url(’bttn_right_down.jpg’) no-repeat top right;}
Como crear un buscador interno para tu Web.
Como crear botones personalizados con HTML y CSS.
Buscador sin MySQL utilizando php.
Efecto reflejo en imágenes con javascript y HTML.
mooHug - Plugin para mootools y galerias de imagen.
MooSearch – Un buscador interno para tu Web.
HTML to MySQL (para buscador interno).
Macromedia Studio 8 - Dreamweaver 8, Flash 8 ....
Swift 3D - Efectos 3D e importación a Flash.
Diseño de páginas web - Anaya Ed.2001.
