Botones con fondo corredizo en CSS

21-04-2015 - Andrés Cruz

Botones con fondo corredizo en CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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
  • inset: Este valor indica que la sombra aparecerá dentro del contenedor y no fuera de ella.
  • offset-x y offset-y: Indican el desplazamiento de la sombra en el eje horizontal y vertical respectivamente.
  • blur-radius Indica el grado de difuminación que para nuestro ejemplo es cero en todos los casos.
  • spread-radius Permite aumentar o reducir el tamaño de la sombra; en nuestro ejemplo siempre es cero.
  • color: Determina el color de la sombra en su representación hexadecimal o cualquier otra soportada por CSS.

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


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!