• Como

    Como Hacer un Botón Animado Usando solo CSS3

    En este tutorial aprenderas a crear atractivos botones animados que imitan el comportamiento real de un botón fisico, todo eso sin usar ni una sola imagen ni javascript.

    Estructura HTML

    Trabajaremos con 3 enlaces que serviran de botones, todos tendrán el mismo efecto pero con colores diferentes, nota las clases que usaremos para identificar cada uno de ellos:

    <a class="button azul">Hazme clic</a>
    <a class="button beige">Hazme clic</a>
    <a class="button rojo">Hazme clic</a>

    Código CSS

    Empezaremos con unas propiedades básicas para el body y para el boton(estilos tipográficos, padding, margins):

    body{
    	background: #d0d9d6;
    	padding-top: 15%;
    	text-align: center;
    }
    .button{
    	/* estilos tipograficos */
    
    	color: #fff;
    	font-family: sans-serif;
    	font-size: 24px;
    	font-weight: bold;
    	text-transform: uppercase;
    
    	/* padding, margin y borde */
    
        padding: 20px 40px;
    	margin-right: 30px;
    	cursor: pointer;
    	border: 0;
        border-radius: 50px;
    
    	/* propiedades para la animacion  */
    
    	transition: all 0.20s linear;
    	-webkit-transition: all 0.20s linear;
    	-moz-transition: all 0.20s linear;
    	position: relative;
    	bottom: 0;
    }

    Para hacer la animación usaremos la propiedad de CSS3 transition, esta propiedad sirve para crear una transición que se activa cuando el elemento seleccionado cambie o sea afectado por un evento.

    Los parámetros que podemos poner en transition son: la propiedad CSS que sera animada, duración de la transición y por ultimo se define un “timing function” este valor es para definir como sera la animación, para este ejemplo usaremos linear que vendría a ser una transición normal(puedes ver todos los tipos de timing functions en este enlace).

    Si probamos esta pagina veremos solo un fondo con 3 textos blancos:

    Ahora definiremos los colores de fondo y los box-shadow que le daran un efecto tridimensional a los botones:

    .azul{
    	background: #04a8bf;
    	box-shadow: 0px 5px 0 #0491a5;
    }
    .beige{
    	box-shadow: 0px 5px 0 #7e8783;	
    	background: #9ca6a2;
    }
    .rojo{
    	background: #bf1b04;
    	box-shadow: 0px 5px 0 #8F1502;			
    }

    Resultado

    Animando el boton

    La animación del boton esta pensada para que se ejecute cuando este sea presionado, entonces necesitamos crear selectores que apunten a este evento.

    .button:active{
    	bottom: -5px;
    }

    El primer selector es uno general que va a seleccionar a todos los elementos que tengan de clase .button y le diremos que cuando este sea presionado(:active) se cambie el valor de la propiedad bottom a -5px de esta manera hacemos que el elemento se agache un poco como si realmente estuviese presionado:

    En este punto ya podemos notar que el transition que definimos al inicio esta tomando efecto y animando el boton cuando este es presionado, sin embargo podemos mejorar aun este efecto, para ello vamos a definir otros 3 selectores del tipo :active para cada uno de los botones:

    .azul:active{
    			
    }
    .beige:active{
    		
    }
    .rojo:active{
    			
    }

    Lo que haremos sera hacer que el box-shadow que le daba aquella sensación tridimensional se esfume cuando el boton sea presionado imitando así el comportamiento real de un boton fisico.

    
    .azul:active{
    	box-shadow:0 0 0 #0491a5, inset 0 0 5px rgba(0, 0, 0, 0.4);			
    }
    .beige:active{
    	box-shadow:0 0 0 #7e8783, inset 0 0 5px rgba(0, 0, 0, 0.4);		
    }
    .rojo:active{
    	box-shadow:0 0 0 #9a1604, inset 0 0 5px rgba(0, 0, 0, 0.4);			
    }
    

    Ademas de ello vamos a agregar una sombra interna que tenga de color un valor rgba(0, 0, 0, 0.4), que traducido seria red=0 green=0 blue=0 y alpha=0.4 haciendo un color negro pero un poco transparente:

    Ten en cuenta que este efecto no se va a poder apreciar en versiones arcaicas de navegadores(IE6, FF2) ya que estos no soportan la propiedad transition y menos aun box-shadow.

    Y con eso termina este tutorial espero te haya gustado y servido, recuerda que puedes ver el resultado final en este enlace y/o descargar el código fuente desde aqui.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese
Acerca de

WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

Suscribete

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: