Ir directamente al contenido de esta página

Un intento de botón con CSS3

Por pura casualidad, di con CSS3 Aqua Button – Revisited for Firefox 3.6, donde la autora crea un botón tremendamente sofisticado por medio de CSS, y se ahorra emplear imágenes.

No obstante, en una de las versiones del botón tiene que recurrir a un marcado poco semántico, mientras que en la otra no consigue el efecto deseado para Safari 4. Partiendo de ahí, he intentado solventar ambos problemas, pero sin lograr un éxito completo. Siendo así, explico lo que he hecho por si alguien puede seguir a partir del punto al que yo he llegado, que tiene este aspecto:

El botón, en Firefox 3.6, Chrome 6, Safari 5, Opera 10 y Explorer 8

El marcado

Primeramente, el problema del marcado. El original de GirlieMac! es éste…


<div class="button aqua">
  <div class="glare"></div>
  Button Label
</div>  
 

…con ese div vacío que me incomoda. El mío:


<div id="boton"><button>Sin imágenes</button></div> 
 

A primera vista no parece haber mucha diferencia, salvo que en el primer caso no es un botón «real» —le faltaría un input o un button para funcionar, si no se emplea JavaScript— y en el segundo sí. Se podría argumentar que mi div sigue siendo poco semántico, pero lo que ocurre es que tanto XHTML 1.0 Estricto como XHTML 1.1. exigen que los elementos de formulario estén contenido dentro de un elemento de bloque dentro de form, así que es ese elemento el que voy a aprovechar para estilar como botón, reservando el button para el efecto de brillo.

El estilo

Como he comentado, la idea es convertir el div en el cuerpo del botón y el button en el efecto de brillo, lo que traducido a CSS es:


#boton{
  margin:0 auto;
  background-color:#609ACF;
  background-color:rgba(60,132,198,0.8);
  background-image:-webkit-gradient(linear,0% 0%,0% 90%,from(rgba(28,91,155,.8)),to(rgba(108,191,255,.9)));
  background-image:-moz-linear-gradient(rgba(28,91,155,.8) 0%,rgba(108,191,255,.9) 90%);
  width:10em;
  height:2em;
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:16px;
  border:2px solid #CCC;
  border-color:#8BA2C1 #5890BF #4F93CA #768FA5; 
  -webkit-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
  -moz-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
  box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
}
  
#boton button{
  margin:0 auto;
  display:block;
  overflow:visible;
  width:90%;
  height:60%;
  padding-top:0.3em;
  font:1em/1 "Lucida Sans",Helvetica,Verdana,sans-serif;
  font-weight:600;
  color:#FFF;
  text-shadow:rgba(10,10,10,0.5) 1px 2px 2px;
  text-align:center;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  background-color:transparent;
  background-color:rgba(255,255,255,0.25);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255,255,255,.7)), to(rgba(255,255,255,0))); 
  background-image:-moz-linear-gradient(rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 95%);
  border:none;
  cursor:pointer;
}
 

Los problemas

Primero, un problema de diseño. Webkit no parece permitir overflow:visible; en el botón del formulario, con lo que los descendentes de las letras quedan cortados.

Segundo, y más importante, un problema de usabilidad. La zona activa del botón no es su superficie aparente, sino sólo la del brillo:

Ups, gran parte del botón no responde como un botón…

Como decía, lo publico a modo de experimento por si alguien da con otra solución. Ánimo 🙂

Esta entrada se publicó el 17 de diciembre de 2010, se archivó en , y fue etiquetada como , . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017