SummArg | Cursos y recursos para webmasters

01/02/2012

Botones en CSS3 con pseudo-elementos

Este recurso de Codrops nos permite elaborar 5 estilos de botones diferentes haciendo uso de las propiedades CSS3, disponibles en todas las últimas versiones de los navegadores populares del mercado.

El código HTML para todos los botones es casi el mismo (solo cambia el número en la clase, dado en inglés):

<a href="#" class="a_demo_three">
 Click me!
 </a>

Simple, no? Y el código CSS correspondiente a la imagen que acompaña la nota es el siguiente:

.a_demo_three {
 background-color:#3bb3e0;
 font-family: 'Open Sans', sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 20px;
 border-left:solid 1px #2ab7ec;
 margin-left:35px;
 background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
 }
  
 .a_demo_three:active {
 top:3px;
 background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
 }
 .a_demo_three::before {
 content:"·";
 width:35px;
 max-height:29px;
 height:100%;
 position:absolute;
 display:block;
 padding-top:8px;
 top:0px;
 left:-36px;
 font-size:16px;
 font-weight:bold;
 color:#8fd1ea;
 text-shadow:1px 1px 0px #07526e;
 border-right:solid 1px #07526e;
 background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
 }
  
 .a_demo_three:active::before {
 top:-3px;
 box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
 }

En un navegador que no soporte CCS3 los botones serán funcionales y se verán cuadrados con los colores de fondo y de fuente elegidos.
 5 Demos | Descarga

Dejar un comentario