DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-04-2015

Los botones son un elemento fundamental en cualquier sistema y los mismos permiten realizar distintas acciones; también son un icono de personalización en cada sistema; en CSS es fácil crear un botón con mucho estilo sin necesidad de agregar muchas líneas de código o ser un experto en CSS.

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo como el siguiente:
Mi botón con animación

Lo primero que definiremos será una serie de CSS básico para dar un poco de estilo a nuestro botón: tamaño, forma, posición, color de fondo, formato para la letra y un sombra interna al borde empleando la propiedad box-shadow:

           .boton_fondo_corredizo_base {
                color: #FFF;
                background: #0BF;
                padding: 20px;
                margin: 25px auto;
                font-family: 'OpenSansBold', sans-serif;
                font-size: 14px;
                font-weight: bold;
                letter-spacing: 1px;
                text-transform: uppercase;
                display: block;
                text-align: center;
                cursor: pointer;
                width: 300px;
                box-shadow: inset 0 0 0 0 #0BF;
                -webkit-transition: all ease 0.8s;
                -moz-transition: all ease 0.8s;
                transition: all ease 0.8s;
            }

La propiedad box-shadow para las sombras internas

Haciendo un pequeño paréntesis; veremos como funciona la propiedad box-shadow que como se ha comentado a un inicio de esta entrada es una propiedad fundamental para este ejercicio; su sintaxis es la siguiente:

Sintaxis de la propiedad box-shadow en nuestro ejercicio

box-shadow: inset offset-x offset-y blur-radius spread-radius color

Como podemos ver, la propiedad box-shadow además de poder emplearse para realizar las típicas sombras a las que estamos acostumbrados:

Mi botón
             .boton_sombra {
                box-shadow: 0 0 10px 2px #F00;
            }

También es empleada para generar "sombras internas" o dentro del contenedor como las siguientes empleando el valor inset:

Mi botón
            .boton_sombra_interna {
                box-shadow: inset 0 0 10px 2px #F00;
            }

Pero si decidimos no agregar el difuminado a la sombra cuyo estado lo maneja el valor inset:

Mi botón
            .boton_sombra_sindifuminado {
                box-shadow: inset 0 0 0 7px #F00;
            }

Queda como si definiríamos un fondo de color al botón.

¿Porqué emplear la propiedad box-shadow en lugar de background?

Sencillamente porque podemos "jugar" con el desplazamiento del color del fondo o definir por donde queremos empezar a pintar el color empleando los desplazamientos a través de las animaciones o transiciones y los valores offset-x y offset-y.

Retornando a la creación de los botones con fondo corredizo

Ya explicado el funcionamiento de la propiedad box-shadow nos resultará más sencillo entender cómo se puede cambiar un fondo de color determinado a través de la propiedad box-shadow; por ejemplo, si quisiéramos aplicar un cambio de color del fondo dando el efecto de arriba a abajo a través de las transiciones en CSS:

Mi botón
            .example .boton_fondo_corredizo_arriba:hover {
                box-shadow: inset 0 70px 0 0 #08B;
            }

Abajo a arriba:

Mi botón
            .example .boton_fondo_corredizo_abajo:hover {
                box-shadow: inset 0 -70px 0 0 #08B;
            }

Derecha a izquierda:

Mi botón
            .example .boton_fondo_corredizo_derecha:hover {
                box-shadow: inset -340px 0 0 0 #08B;
            }

Izquierda a derecha:

Mi botón
            .example .boton_fondo_corredizo_izquierda:hover {
                box-shadow: inset 340px 0 0 0 #08B;
            }

Efecto de cerrado:

Mi botón
            .example .boton_fondo_corredizo_abajo:hover {
                box-shadow: inset 0 -70px 0 0 #08B;
            }

Diagonales:

Mi botón
            .example .boton_fondo_corredizo_abajo:hover {
                box-shadow: inset 340px 50px 0 0 #08B;
            }
Mi botón
            .example .boton_fondo_corredizo_diagonal1:hover {
                box-shadow: inset -340px 50px 0 0 #08B;
            }
Mi botón
            .example .boton_fondo_corredizo_diagonal2:hover {
                box-shadow: inset -340px -50px 0 0 #08B;
            }
Mi botón
            .example .boton_fondo_corredizo_diagonal3:hover {
                box-shadow: inset 340px -50px 0 0 #08B;
            }
Mi botón
         .example .boton_fondo_corredizo_diagonal4:hover {
                box-shadow: inset 340px -50px 0 0 #08B;
            }

Podrás encontrar el artículo original en la siguiente enlace: CSS Button With Sliding Background Color


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader cuadrado

Loader cuadrado

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Algunos artículos que te pueden interesar

Triángulo con fondo animado con CSS

Triángulo con fondo animado con CSS

Se explica cómo crear un triángulo con un fondo animado con un poco de CSS, HTML vectorial y una imagen.

Andrés Cruz 19-12-2016

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015