button_active-css

Cada vez se usan más los botones con estado “active” o activo (presionado) en CSS. Usaremos una imagen como rollover crear un botón con estado normal y presionado (active) en CSS. Empezemos:

Código CSS

Primero debemos descargar la imagen que usaremos como rollover y subirla a nuestro servidor (ruta por defecto: en la raíz): Descargar imagen.

Después aplicamos este código CSS:

#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}
#button:active {
background: url(button.png) no-repeat bottom;
}

Si nos fijamos simplemente se usa la misma imagen, solo que se la cambia su posición, haciendo que sea top (cuando está normal) y bottom (cuando está presionada).

Código HTML

La estructura básica para que se muestre el botón es esta:

<a id="button"></a>

Simplemente esa línea de código nos mostrará el botón, nada más.

Estandarización

XHTML 1.0 Strict válido

CSS 2.1 válido

Ejemplo de su funcionamiento

Podemos ver un ejemplo de su funcionamiento.

Problemas con Internet Explorer

Aunque los estándares de este hack son válidos, en algunas versiones de Internet Explorer no funciona el efecto de presión. Para arreglarlo debemos:

Descargarnos este archivo .htc y alojarlo en la raíz de nuestro servidor: Archivo .htc (este archivo hará que podamos usar el estado active y hover de manera distinta para que funcione en Internet Explorer). El código que contiene el archivo .htc es este:

<public:attach EVENT="onmouseover" ONEVENT="DoHover()"></public:attach>
<public:attach EVENT="onmouseout"  ONEVENT="RestoreHover()"></public:attach>
<public:attach EVENT="onmousedown" ONEVENT="DoActive()"></public:attach>
<public:attach EVENT="onmouseup"   ONEVENT="RestoreActive()"></public:attach>
<script LANGUAGE="JScript">
function DoHover()
{ element.className += ' hover';
}

function DoActive()
{ element.className += ' active';
}

function RestoreHover()
{ element.className = element.className.replace(/\bhover\b/,'');
}

function RestoreActive()
{ element.className = element.className.replace(/\bactive\b/,'');
}
</script>

Después debemos aplicar la propiedad behavior a los botones (button), filas (td) y columnas (tr) mediante CSS, llamando a el archivo que hemos subido anteriormente:

button, tr, td
  { behavior: url('IEFixes.htc');
  }

Ya solo nos queda aplicar la nueva forma de estado hover y active (En vez de dos puntos [:] pondremos uno [.]):

button:active, button.active
  { /*Estilos active aquí */}
button:hover, button.hover
  { /*Estilos hover aquí */}

Vía | Usability Post