Botones con fondo corredizo en CSS

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.

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:

             .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:

            .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:

            .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:

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

Abajo a arriba:

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

Derecha a izquierda:

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

Izquierda a derecha:

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

Efecto de cerrado:

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

Diagonales:

            .example .boton_fondo_corredizo_abajo:hover {
                box-shadow: inset 340px 50px 0 0 #08B;
            }

            .example .boton_fondo_corredizo_diagonal1:hover {
                box-shadow: inset -340px 50px 0 0 #08B;
            }

            .example .boton_fondo_corredizo_diagonal2:hover {
                box-shadow: inset -340px -50px 0 0 #08B;
            }

            .example .boton_fondo_corredizo_diagonal3:hover {
                box-shadow: inset 340px -50px 0 0 #08B;
            }

         .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