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

Flat Module con puro CSS

Flat Module con puro CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Algunos artículos que te pueden interesar

Animando letras con animation-delay en CSS

Animando letras con animation-delay en CSS

Se explica cómo crear una sencilla animación de letras empleando la propiedad animation-delay en CSS.

Andrés Cruz 18-08-2016

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015

Guía rápida sobre el background en CSS (parte 1)

Guía rápida sobre el background en CSS (parte 1)

Esta propiedad es la forma abreviada para establecer las demás propiedades relacionadas incluyendo aquellas relacionadas con el color e imagenes de fondo de un elemento; es decir, aquellas cuyo prefijo es background-.

Andrés Cruz 19-02-2014