Crear un boton al estilo material design (Material Buttons)


2 min de lectura
Crear un boton al estilo material design (Material Buttons)

Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal.

Material Design

Recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.

Precisamente este diseño basado en objetos es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Material Design quiere guiarse por las leyes de la física, donde las animaciones sean lógicas, los objetos se superpongan pero no puedan atravesarse el uno al otro.

En este pequeño tutorial realizare un botón con los efectos de ondas material design, utilizando css y javaScript

Lo primero agregamos nuestro botón en nuestro html y agregamos la clase waves

 <button class="btn btn-large waves">Button</button>

Declaramos nuestros respectivos estilos para la clase waves

/* Caja del botón */
.waves {
  position: relative;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* Caja de las ondas*/
.waves-ripple {
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* Animación para la caja de las ondas*/
.waves-animate {
  -webkit-animation: waves_ripple-animate 0.5s linear;
          animation: waves_ripple-animate 0.5s linear;
}

@-webkit-keyframes waves_ripple-animate {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes waves_ripple-animate {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

Ya te tenemos nuestro botón con su clase respectiva. Ahora nos toca realizar maravillas con javaScript estoy utilizando la libreria jQuery

(function(){

    /*Declaramos variables Globales*/    
    var waves_ripple, d, x, y;
    
    $('.waves').on('click', wavesRipple);
    
    function wavesRipple(e){
        e.preventDefault();
        var that = $(this);
        
        /* Si no existe nuestra caja hijo se lo agregamos */
        if ( that.find('.waves-ripple').length === 0 ){
            that.prepend( '<span class="waves-ripple"></span>' );
        }
        
        waves_ripple = that.find('.waves-ripple');
        waves_ripple.removeClass('waves-animate');
        
        if ( !waves_ripple.height() && !waves_ripple.width() ){

            /* Optemos el tamaño maximo de uno de los lados de la caja padre */
            d = Math.max(that.outerWidth(), that.outerHeight());
            
            /* Agregamos el tamaño optenido a nuestra etiqueta hijo */
            waves_ripple.css({
                height: d,
                width: d
            });
        }
        
        /* Obtener posiciones donde se dio click */
        x = e.pageX - that.offset().left - waves_ripple.width() / 2;
        y = e.pageY - that.offset().top - waves_ripple.height() / 2;
        
        /* Las posiciones optenidas se lo agregamos a nustra caja hijo */
        waves_ripple
            .css({
                top: y + 'px',
                left: x + 'px'
            })
            .addClass('waves-animate');
        
    }
    
})();


Aquí tienes la demostración de como funciona. El código es editable y puedes usar en tus proyectos. Si tienes dudas solo deja un comentario para poder ayudarte XD.

See the Pen Material Buttons by GodoFredo (@GodoFredoNinja) on CodePen.



Slither.io el mejor juego de Gusanos
Artículo anterior

Slither.io el mejor juego de Gusanos

Es un videojuego masivo en línea publicado el 30 de marzo de 2016 por la compañía Thorntree Studios. Slither.io no es nuevo, pero es

Web Browser Mockups PSD
Artículo siguiente

Web Browser Mockups PSD

Una gran colección de Mockup de navegadores web para su descarga de forma gratuita. Todo los archivos se pueden abrir en Photoshop, Illustrator por que


SUBIR

🎉 Te has suscrito con éxito a GodoFredo!
OK