CSS para de los botones de Google

Algo que admiro de Google y que se mantiene en todos los servicios que ofrece es la simpleza de su diseño, en especial sus botones, así que he usado el código de estos botones en algunos diseños y para tenerlos siempre a mano lo pondré en este post.  

Botón tipo Google

Estos botones están diseñados con webkit (para Chrome) , ¿y qué es esto?   es un motor para navegadores de código abierto.   ¿y qué es esto? un motor de navegador es el software integrado en tu navegador que se encarga de interpretar las etiquetas (como HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) y lo muestra como contenido.    Todos los navegadores incluyen algún tipo de motor.

En el código css vamos a ver la combinación de código para motores de todos los navegadores:

Con las siguientes lineas de código se consigue el dar un degradado del botón, y tiene el código para ser interpretado por cada uno de los navegadores del mercado así:

Chrome background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));

Firefox: background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
IE background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
Opera:  background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
Chrome: background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4D90FE,#4787ED);

Básicamente lo que hace es dar una dirección y dos tonos de colores que son degradados, en este caso van del tono #4D90FE al tono #4787ED de arriba hacia abajo. 

Para conseguir el borde redondeado utilizamos el siguiente código si desean hacer que se note un poco más el borde aumenten el valor:

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
 border-radius: 2px;
-moz-user-select: none;
-webkit-user-select: none;

Para este ejemplo vamos a crear el bóton en una etiqueta de ancla:

<a class="gboton" href="http://www.creandoweb.co/" target="_blank">Botón tipo Google</a>

y creamos el CSS para esa clase:

a.gboton{
   background-color: #4D90FE;
   background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
   background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
   background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
   background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
   background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
   background-image: linear-gradient(top,#4D90FE,#4787ED);
  filter: progid:DXImageTransform.Microsoft.gradient
   (startColorStr='#4d90fe',EndColorStr='#4787ed');
   border: 1px solid #3079ED;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   -moz-user-select: none;
   -webkit-user-select: none;
   color: white;
   display: inline-block;
   font-weight: bold;
   height: 29px;
   line-height: 29px;
   text-align: center;
   text-decoration: none;
   padding: 0 8px;
   margin: 0px auto;
  font: 13px/27px Arial,sans-serif;
  cursor:hand;
}

Una ayuda adicional es este Generador en línea de degradado que les permitirá configurar el botón con colores personalizados http://gradients.glrzad.com/

Si te ha servido está guía, puedes invitarme un café !

Desea aprender como crear botones como estos, reciba clases personalizadas de HTML, CSS.  Desea crear su propio sitio web, aprenda mientras práctica y consiga los mejores resultados www.creandoweb.co  

Si desea ayuda profesional para la creación de sitios web visite nuestro sitio oficial y cotice:  www.creandoweb.co