NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (7 Botones)

15 de Noviembre del 2011 por Josep Antoni Bover, 7 visitas, 0 comentarios, 0 votos
Categorías : HTML, CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...
Creación de páginas web desde cero (7 Botones)

En este tutorial veréis algunos trucos para añadirle botones gráficos a vuestra web.

Lo más normal es que este tipo de controles se utilicen para llegar a otro documento web o a una descarga, y siempre resulta interesante que se vean bien para que el usuario no se pierda fácilmente.

No es lo mismo poner un enlace de texto plano con la etiqueta "<a>" que tener ese enlace dentro de un marco con borde y un color de fondo bien resaltado.

Lo primero que vais a hacer será un botón simple utilizando CSS. Este botón consistirá en un div que mediante css tendrá un borde y un color de fondo que resalten dentro del documento. Observad la declaración del estilo CSS :

Estilo CSS para un botón
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Estilo para el botón */
.Boton1 {
/* Propieades para la visualización */
display:table;
padding:3px;
margin:3px;
/* Porpiedades para el borde */
border-color:rgb(50, 50, 50);
border-style:solid;
border-width:1px;
border-radius:4px;
/* Propiedades para el fondo */
background-color:rgb(0, 200, 0);
/* Sombra para el botón */
box-shadow: rgba(128,128,128, 0.5) 2px 2px 2px;
}
/* Estilo para el botón cuando el mouse se encuentra encima */
.Boton1:hover {
/* Propiedades para el fondo */
background-color:rgb(0, 220, 0);
/* Cursor del mouse */
cursor:pointer;
}
/* Estilos para los enlaces dentro del botón */
.Boton1 a {
text-decoration:none;
color:rgb(255, 255, 255);
}
/* Estilos para los enlaces resaltados dentro del botón */
.Boton1 a:hover {
text-decoration:none;
color:rgb(255, 255, 0);
}

Hay tres propiedades de este estilo CSS que aun no sabéis que hacen :

En principio creo que queda claro todo hasta llegar a la línea 27, por si acaso vamos a repasar-lo. Primero definimos un estilo para el botón en su estado normal donde tiene un margen interno de tres pixeles, un borde redondeado de color negro, un fondo de color verde y una sombra alrededor del marco.

Luego en la línea 19 definimos el estilo que debe tomar cuando el mouse se encuentra encima del botón, por lo que el color del fondo pasa a ser un verde algo más claro, y el cursor del mouse cambia a una mano con el dedo índice levantado.

A partir de la línea 27 creo que es lo que no habrá quedado muy claro, fijaros que creamos la clase con el siguiente nombre ".Boton1 a {", al hacer esto estamos indicando que vamos a escribir el estilo CSS de las etiquetas <a> que se encuentren dentro de una clase Boton1. En este caso lo que hacemos es poner el color del texto del enlace a blanco.

Por último en la línea 30 estamos escribiendo el estilo para los enlaces resaltados dentro de la clase Boton1, por lo que ponemos el color del enlace a amarillo, y además le decimos que el enlace resaltando no estará subrayado con la propiedad "text-decoration:none".

Todo esto está muy bien, pero y si queremos utilizar una imagen para el fondo del botón, sin tocar el borde y el fondo?

Esto ya es más problemático pero no por ello es imposible, en primer lugar pensad que cada botón puede tener un tamaño distinto debido a que el texto que tiene dentro no tiene porque ser igual.

garabatos

Para el siguiente ejemplo vamos a utilizar la imagen de la derecha que tiene 200 pixeles de ancho, pero de la cual solo mostraremos 100 pixeles. La idea es mostrar una parte cuando pasemos con el mouse por encima, y mostrar la otra parte cuando no estemos encima con el mouse. Veamos la declaración de los estilos CSS :

Estilo CSS para un botón gráfico
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* Estilo para el botón de los garabatos */
.Boton2 {
/* Propieades para la visualización */
position:relative;
display:table;
padding:3px;
margin:3px;
width:100px;
/* Propiedades para el fondo */
background-image:url('Tutorial_HTML5_7_Ejemplo_Garabatos.png');
background-repeat:no-repeat;
/* Propiedades para el texto */
text-align:center;
text-shadow:1px 1px 1px rgb(0, 0, 0);
}
/* Estilo para el botón de los garabatos RESALTADO */
.Boton2:hover {
/* Propiedades para el fondo */
background-position:-100px 0px;
/* Cursor del mouse */
cursor:pointer;
}
/* Estilos para los enlaces dentro del botón */
.Boton2 a {
color:rgb(255, 255, 255);
text-decoration:none;
}
/* Estilos para los enlaces resaltados dentro del botón */
.Boton2:hover a {
color:rgb(255, 0, 0);
text-decoration:none;
}

En este ejemplo se ha utilizado la propiedad "background-image" para especificar que el fondo del div utilice una imagen. Fijaros que también se utiliza la propiedad "background-repeat" con el valor "no.repeat", eso es porque no queremos que se repita la imagen por abajo.

En la línea 19 se utiliza la propiedad "background-position" que nos permite indicar en qué punto de la imagen se empezara a mostrar. Por defecto esta propiedad nos mostrara la imagen a partir del pixel 0-0 pero en este caso queremos mostrar la parte de la imagen que queda a la derecha y que tiene los garabatos de color gris, por lo que empezaremos a -100 pixeles.

También podríamos utilizar dos imágenes por separado, pero esto tiene el problema de que el navegador no cargara la imagen resaltada hasta que no pases por encima con el mouse, y como no todo el mundo tiene internet de alta velocidad podría ser que se tarde algún tiempo de mas en ver el resultado, cosa que no nos conviene.

Otra cosa a destacar es que con este ejemplo en concreto si añadimos un texto que ocupe más de 100 pixeles de ancho se nos carga el efecto y se nos mostrara el texto sobrante más abajo.

Qué pasa si queremos hacer un botón utilizando imágenes que pueda ser de cualquier tamaño? Por poder podemos, el problema es enfocarlo bien.

garabatos

Supongamos que el botón siempre va a tener la misma altura, pero con un ancho indeterminado, de ser ese el caso podemos utilizar 3 imágenes para mostrar el botón, una para el borde izquierdo, una para la parte central y una para el borde derecho.

Pues bien fijaros en la imagen de la derecha en la cual hay 6 partes que conformaran el botón, las tres primeras partes son para el botón en estado normal (degradado de amarillo a rojo), y las tres últimas partes son para el botón en estado resaltado (degradado de rojo a amarillo).

Cada parte mide 25 (23 + 2 pixeles en blanco) pixeles de alto por 6 de ancho, a partir de aquí podemos jugar con la propiedad "background-position" y "background-repeat" para ir ubicando cada parte correctamente. Otra cosa a remarcar es que el botón consistirá en cuatro divs, uno que contendrá todo el botón entero, y los otros tres que mostraran cada parte de él. Veamos la declaración de los estilos CSS :

Boton3 dividido por pixeles
Estilo CSS para un botón gráfico complejo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* Botón 3 */
.Boton3 { display:table; }
.Boton3:hover { cursor:pointer; }
/* Enlaces dentro del botón 3*/
.Boton3 a { color:rgb(50, 50, 50); text-decoration:none; }
.Boton3:hover a { color:rgb(0, 0, 0); text-decoration:none; }
/* Parte izquierda del botón 3 */
.Boton3I {
/* Tamaño */
width:6px;
height:23px;
/* Imagen */
background-image:url('/Web/Graficos/Tutorial_HTML5_7_Ejemplo_Boton3.png');
/* Posicionamiento */
float:left;
}
.Boton3:hover .Boton3I { background-position:0px -75px; } /* Restamos 75 pixeles a la Y */
/* Parte central del botón 3 */
.Boton3C {
/* Tamaño */
height:23px;
/* Imagen */
background-image:url('/Web/Graficos/Tutorial_HTML5_7_Ejemplo_Boton3.png');
/* Posicionamiento */
background-position:0px -25px; /* Restamos 25 pixeles a la Y */
float:left;
padding-top:2px;
}
.Boton3:hover .Boton3C { background-position:0px -100px; } /* Restamos 100 pixeles a la Y */
/* Parte derecha del botón 3 */
.Boton3D {
/* Tamaño */
width:6px;
height:23px;
/* Imagen */
background-image:url('/Web/Graficos/Tutorial_HTML5_7_Ejemplo_Boton3.png');
/* Posicionamiento */
background-position:0px -50px; /* Restamos 50 pixeles a la Y */
float:left;
}
.Boton3:hover .Boton3D { background-position:0px -125px; } /* Restamos 125 pixeles a la Y */

No hay mucho que contar sobre estos estilos CSS, lo que tiene que quedar claro es que en la propiedad "backgorund-position" asignamos valores negativos a la Y para empezar más abajo de la imagen.

Por último vamos a ver como quedaría escrito el Boton3 en HTML :

Boton3 en HTML
1
2
3
4
5
6
7
<div class='Boton3'>
<a href='www.miurl.com'>
<div class='Boton3I'></div>
<div class='Boton3C'>Boton3</div>
<div class='Boton3D'></div>
</a>
</div>

Y con esto terminamos la séptima entrega del tutorial, si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador.

Ver Ejemplo Descargar Ejemplo

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (8 Menus).