Botones Css3 adiós photoshop

Corren nuevos tiempos para los diseñadores.

No cabe duda que Css3 ha venido a quedarse, algunas de sus propiedades son realmente impresionantes y ha sido gracias a muchas voces relacionadas con el diseño gráfico para Internet las que se han tenido en cuenta.

Revisando unos materiales online sobre diseño de widgets para la web desde UIParade, me topé con un vídeo, donde explicaba  cómo hacer un botón con un buen diseño en photoshop (en concreto este vídeo tutorial), así que me propuse hacer lo mismo mediante CSS3 y básicamente este es el resultado:

El efecto es mejorable y cabría añadir el icono del tick dentro del botón, pero el resultado, aún con esquinas redondeadas, se parece bastante y es totalmente funcional, con rollover y todo.

Para poder ver el resultado debes disponer de un navegador con soporte a CSS3 y que soporte gradientes y sombras. Hasta la fecha los navegadores que mejor soporte dan a CSS3 son Firefox y los basados en Webkit, como Safari y Google Chrome. Opera no da un buen resultado y si has venido hasta aquí con Internet Explorer, lo siento pero no podrás ver mucho.

Sí que he encontrado algunas diferencias sobretodo en Chrome a la hora de interpretar el fondo, no lo realiza del todo uniforme. Pero no es una mala solución, ya que no se ha manejado ninguna imagen.

Las conclusiones pueden ser muchas, pero a grandes rasgos en el vídeo necesitamos adquirir una licencia de photoshop y un buen conocimiento del mismo programa, mientras que con CSS3 solamente un bloc de notas sería suficiente y otra conclusión es que no hay sobrecarga de imágenes, no hay múltiples peticiones de las mismas, ni conexiones concurrentes desde nuestro navegador (algo que por otra parte se puede resolver usando CSS Sprites), también el contenido es indexable y al ser texto descarga muy rapidamente.

La desventaja es que a día de hoy el soporte a CSS3 no es completo por todos los navegadores, aunque en el caso de Internet Explorer se puede aplicar un parche para entienda CSS3.

CSS3 viene empujando fuerte y cada vez se ve mejor su potencial, sobretodo en el desarrollo de aplicaciones móviles y tablets. Por otro lado, los diseñadores deberán empezar a conocer este tipo de herramientas y tecnología para los nuevos diseños web.

A continuación dejo el código usado para crear el botón:

<style type="text/css">
#contenedor {
  background-image: -moz-repeating-linear-gradient(150deg, rgb(102, 102, 102) 1px, rgb(0, 0, 102) 3px);
  background-image: -webkit-repeating-linear-gradient(150deg, rgb(102, 102, 102) 1px, rgb(0, 0, 102) 3px);
  background-image: repeating-linear-gradient(150deg, rgb(102, 102, 102) 1px, rgb(0, 0, 102) 3px);
  height: 100px;
  width: 150px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
#btnEnviar {
  color: rgb(6, 21, 50);
  left: 20%;
  position: relative;
  top: 20%;
  background-image: -moz-linear-gradient(rgb(94, 172, 202), rgb(70, 128, 150));
  background-image: -webkit-linear-gradient(rgb(94, 172, 202), rgb(70, 128, 150));
  background-image: linear-gradient(rgb(94, 172, 202), rgb(70, 128, 150));
  background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, rgb(94, 172, 202)), color-stop(1, rgb(70, 128, 150)));
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(51, 51, 255);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(51, 51, 255, 0.25);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  text-shadow: 0px -1px 0px rgb(0, 0, 102), 1px 1px 1px rgba(255, 255, 255, 0.5);
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  font-weight: bold;
  vertical-align: middle;
}
#btnEnviar:hover {
  color: rgb(255, 102, 0);
  text-shadow: -1px -1px 1px rgba(255, 204, 51, 0.5), 1px 1px 1px rgba(255, 204, 0, 0.5);
}
#btnEnviar:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
</style>
 

El código html es simple, un div y un button:

<div id="contenedor">

<button id="btnEnviar" name="enviar" type="submit" value="Enviar">Enviar</button>
</div>