Botones CSS Misma Imagen efecto de hover y active

// Antes de que FeCr sugiera que tome un descanso, este tema se me ocurrio para el botón de comentarios de Kernel Error, y nada mas.

Fuera de ese comentario algo *Extraño* pasare a explicarles en lo que consiste el tema de hoy.

Hoy veremos como con un boton en HTML darle estilo de tal forma que tenga 3 imagenes diferentes por estado (inactivo rollover y activo), pero el truco en este turoial es que todos los estados cargan la misma imagen pero en diferentes posiciones asi evitando que se cargue la imagen dureante el rollover o durante el Click.

Primero necesitaremos hacer nuestras 3 imagenes.

Aqui estan las mias:

<- En estado Inactivo (Como se ve normalmente)

<- El estado Rollover o hover en CSS (el mouse por encima)

<- El estado Active (Cuando se selecciona o se activa el botón)

Posteriormente lo que tenemos que hacer, es unir la imagen de tal forma que quede solo 1 y organizarla ya sea de forma horizontal o Vertical

Después de esto solo hace falta añadir el CSS y usar las funciones de hover  active y background position que es lo que hace que se mueva.

La syntaxis que se usa para background position es esta:

background-position: X Y;

En este caso moveremos verticalmente entonces moveremos el segundo valor que vendria siendo Y

Como cada boton individual mide 104 x 33, se recorreran 33 Pixeles hacia abajo (Y), para acceder a la siguiente imagen, de tal forma que quedaria asi:

#enviar {

   float: left;

   padding:0; margin:0;

   border:0;

   height:33px;

   width:104px;

   background: url(enviar.png) 0 0 no-repeat;

}

#enviar:hover {

	background-position: 0 -33px;

}

#enviart:active {

	background-position: 0 -66px;

}

No hace falta copiar los demas atributos pues solo encesitas especificar los nuevos valores.

Con esto debería estar listo
Ejemplo, el formulario de comentarios.

• 

Posts Relacionados

• Barra de menu con CSS e imagen de fondo Pués este metodo te permite tener una barra de menu...
• Mostrar imagen desde una url en c# Buenas. En algún momento hemos necesitado que dada una url...
• Usar una imagen como portada de carpeta en Windows Un tema corto, en Windows existen varias formas de tener...
• Rectángulo con bordes redondeados, de tamaño variable Esta clase de formato puede resultar peculiarmente util, al momento...
• Sombreado con CSS Pués basicamente esta entrada explica como hacer cuadros de texto...