CSS3: botones css3 para cualquier navegador Web
Trata de: Desarrollo

Por suerte el uso de imágenes para poner botones en un sitio web; está llegando a su fin rápidamente, gracias al soporte de los navegadores web actuales que permiten ampliar las propiedades de CSS3 como: esquinas redondeadas, degradados y sombras del texto.

Navegadores web como Google Chrome, Firefox y Safari, han comenzado a apoyar algunas de estas propiedades mucho antes que CSS3 se pusiera de moda, pero con IE lentamente no entramos al juego, no hay más excusas. Los botones CSS son fáciles de diseñar, implementar y administrar, así que esto no solo será una gran ayuda para desarrolladores web front-end, sino también para cualquier usuario sin experiencia, es fácil.

Te voy a mostrar, paso a paso, cómo crear botones CSS.

Nota: por un tema de compatibilidad con navegadores que no están actualizados aún, voy a poner al final la imagen resultante de cada botón hecho con css3.

Etiquetas Input & Anchor

En la mayoría de los casos, va a utilizar las etiquetas Input o Anchor para mostrar un botón que dará lugar a una acción en la página actual o enviar al visitante hacia otra página. Vamos a seguir adelante y escribir la estructura de los dos elementos.

[highlight]<input type=”submit” value=”Accept” />
<a href=”#”>Decline</a>[/highlight]

Tenga en cuenta que estamos usando la clase CSS btn. Esta será nuestra clase base CSS para nuestros botones. En un esfuerzo por mantener CSS orientado a objetos, lo primero que vamos a crear una clase simple de BTN, que todos nuestros botones heredan y que luego se extienden con clases adicionales para las diferencias de color y tamaño.

CSS parte 1

En primer lugar, vamos a establecer algunas propiedades elementales de la clase  Btn. Esto es principalmente para reemplazar el estilo por defecto del navegador de los elementos y sentar las bases para un nuevo diseño del botón.

.btn{
/* Round 1 */
border:1px solid #666;
cursor:pointer;
display:block;
margin:10px auto 0;
padding:5px;
text-align:center;
text-decoration:none;
width:140px;
}

botones-css3-parte1

CSS parte 2

Ahora viene la parte divertida, vamos a estilo de estas etiquetas Input & Anchor y los convertiremos en botones, utilizando las propiedades border radius, gradient, y text shadow, junto con algunos otros por si acaso.

.btn{
/* Round 1 */
border:1px solid #666;
cursor:pointer;
display:block;
margin:10px auto 0;
padding:5px;
text-align:center;
text-decoration:none;
width:140px;
/* Round 2 */
-moz-border-radius:15px;
-webkit-border-radius:15px;
background:#20c167;
background-image:-moz-linear-gradient(top, #20c167, #157f44);
background-image:-o-linear-gradient(top, #20c167, #157f44);
background-image:-webkit-gradient(linear, center top, center bottom, from(#20c167), to(#157f44));
background-image:linear-gradient(top, #20c167, #157f44);
border-radius:15px;
color:#FFF;
font-size:.75em;
font-weight:bold;
text-shadow:-1px -1px 0 #444;
}

Como se puede ver a continuación, nuestros botones CSS3 están tomando forma. El gradiente, las esquinas redondeadas y sombra de texto se combinan para crear un botón cool.

botones-css3-parte2

CSS parte 3

Vamos a ampliar la clase Btn con una llamada a “.decline”, vamos a utilizar el estilo “decline” del botón. Si usamos la clase base del botón para cubrir las sustituciones de navegador y estilos generales del botón, entonces podemos usar semánticamente la llamada a las clases para cambiar su tamaño, color y cualquier otra cosa que tenemos en el botón.

.decline{
background:#ad232e;
background-image:-moz-linear-gradient(top, #ff3443, #ad232e);
background-image:-o-linear-gradient(top, #ff3443, #ad232e);
background-image:-webkit-gradient(linear, center top, center bottom, from(#ff3443), to(#ad232e));
background-image:linear-gradient(top, #ff3443, #ad232e);
width:90px;
}

botones-css3-parte3

El botón de decline es un poco más pequeño y tiene un gradiente de color rojo agradable. Con este enfoque, la creación de todo tipo de botones para su sitio web debe ser nada fácil. Sólo tiene que utilizar una clase base, como btn y luego extender con clases personalizadas para crear distintos botones.

¿Que pasa con IE?

Antes que deje de leer y empezar a crear botones CSS3, probablemente deberíamos hablar de IE. Es curioso cómo ese navegador siempre promueve discusiones CSS. Ahora, Microsoft tiene su propio filtro de la propiedad gradient, pero yo no soy  fan de su uso. En cambio, para que nuestros botones sean mas compatible, vamos a utilizar una imagen de fondo de 1 píxel. Todo por el bendito de IE.

.btn{
background:#20c167 url(btnAccept-default.gif) repeat-x left bottom;
}
.decline{
background:#ff3443 url(btnDecline-default.gif) repeat-x left bottom;
}

botones-css3-parte4

Con la imagen de fondo en su lugar, tenemos un botón aceptable en IE7/IE8 y una muy agradable en IE9. Por desgracia, todavía no hay soporte de sobras de texto en IE9, pero al menos tenemos las esquinas redondeadas.

Retoques Finales

Por último, para un efecto bonito cuando pulse el botón, vamos a invertir los colores de degradado en el estado activo del elemento.

.btn:active{
background:#157f44;
background-image:-moz-linear-gradient(top, #157f44, #20c167);
background-image:-o-linear-gradient(top, #157f44, #20c167);
background-image:-webkit-gradient(linear, center top, center bottom, from(#157f44), to(#20c167));
background-image:linear-gradient(top, #157f44, #20c167);
}

Así que ahí lo tienen, un botón de gran apariencia de estilo con la última propiedades de CSS3 que funciona en todos los principales navegadores. Gracias por leer y no dude en dejar sus comentarios o preguntas!

Publicado por:

Lo último en el sitio

 

Nombre

Atención: Antes de aportar al artículo con sus comentarios, le pedimos encarecidamente que evite generar spam, discusiones agraviantes o mensajes de contenido violento y racista. Todo usuario que no acate a este llamado, será suspendido en la brevedad.

 

2 Comentarios en “CSS3: botones css3 para cualquier navegador Web”

 
 

Sitios recomendados

 
  Articulos populares
 
+ Angry Birds RIO para PC Windows | PC Game completo (156)
+ Windows 7 Loader / Activador de Windows 7 (Actualizado Octubre 2011) (81)
+ Invitaciones a Google +, te enviamos una (74)
+ Angry Birds Seasons 2011 - 2012 (Descarga gratuita) (68)
+ Windows 7 Loader, Activador de Windows 7 (Actualizado Febrero 2011) (63)
+ Activar Facebook Timeline | Biografía Facebook (54)
+ Angry Birds v1.6.3 para PC (28)
+ Angry Birds v2.0.0 para PC (Enero 2012) (28)
+ Como Instalar Debian 6 "Squeeze", paso a paso [Guía Fácil] (25)
+ Instalar y configurar phpMyAdmin 3 en Windows 7 / paso a paso (24)
 
 
  Tags del sitio
 
Angry Birds Aplicaciones Aplicaciones Linux Apple Como Hacerlo Consejos Desarrollo Web Descargas Diarios Diseño El País Entretenimiento España Facebook Firefox Fotos Gadgets Google Google Chrome Google Plus Infografia Internet iPhone Juegos Linux Navegadores Negocios Negocios y Marketing Noticias de Tecnologia Paso a Paso Periódicos Redes Sociales Revistas Seguridad Social Media Social Media Marketing Tecnología Telefono Celular Tips Twitter Ubuntu 11 Video Windows Windows 7 WordPress
 
 
  Comentarios recientes
 

Maryza:  cabal
amnada:  no sirve
Juan José:  ey amigo.!!! tengo
Eduardo:  ADVERTENCIA Estas
chuck:  amigo lo que quier
shantal:  no me guta + +
Coder Architect:  viejo, este juego
dameseano prieto:  solo quiero la cla
Horacio:  Debes hacer una pa
Carlos:  Ustedes se quejan?