Simplificá los estilos de tus botones y todos sus estados con filtros CSS

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

¡Hola! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o links, y deben tener en cuenta los distintos estados de los mismos.

Este es un ejemplo de dos tipos de botones y sus estados.

El proceso lógico es empezar por los estilos del botón en su estado inicial y después desarrollar los estados mediante las pseudoclases correspondientes.

Lo recomendable es que si estás replicando una interfaz de un wireframe o estás utilizando un UI kit, respetes todos los colores y estilos acordados. En cambio, si estás programando tu propia UI y sólamente querés que tus botones queden funcionales, te voy a mostrar cómo podés alivianarte mucho el trabajo. Obviamente también suponemos que no vas a usar una librería UI.

Lo que lleva mucho tiempo al momento de estilizar los botones es buscar los colores correctos para los distintos estados, y se complica más aún si no tenés conocimientos sobre colores en UI. Y todavía más complicado si queremos tener botones con degradado porque tenemos que armar mínimo tres degradados que queden bien.

Acá es cuando aparecen los filtros CSS 👐

La idea es escribir sólo los estilos del estado por defecto, y obtener la apariencia de los demás estados mediante la propiedad filter, olvidándonos de todas las variaciones de los colores.

En el siguiente ejemplo uso la función brightness(). Entonces hago el botón más clarito para el hover y lo hago más oscuro para active y focus.

Pero también podés usar otras funciones como opacity(), grayscale() y saturate(). Es cuestión de probar lo que mejor se ajuste al aspecto que querés conseguir.

Podemos ver que incluso podemos aplicar lo mismo para enlaces.

En resumen:

button:hover {
    filter: brightness(1.15);
}
button:active, button:focus {
    filter: brightness(0.95);
}

Podés encontrar más ejemplos en los links que dejo al final.

Muchas gracias por leerme. Ojalá te sirva este tip para tus próximos proyectos. 💪

Fuentes:

Comentarios

Galería de Imágenes Simple, con Javascript y CSS

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle...

seguir »

Ventana flotante con botón cerrar

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'> <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById('ventana-flotante').className = 'oculto''>x</a> <div id='contenedor'> <div class='contenido'> Aquí va el mensaje. </div> </div> </div> <style> #ventana-flotante { width: 360px; /* Ancho de la ventana */ height: 90px; /* Alto de la ventana */ background: #ceffad; /* Color de fondo */ posi...

seguir »

Tabs, menú de contenidos con pestañas. Versión CSS

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1"> Pestaña1 </label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"> Pestaña2 </label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> ...

seguir »

Efecto biselado con CSS

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ; /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ; /* Grosor del Borde */ /* Color del Borde */ color: white ; /* Color del texto */ text-align: center ; /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más ef...

seguir »

Botón circular 3D realista con CSS

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton { background: url( http://www.ashleyjt.net/windows/images/Android.png ) /* Url de la imagen */ no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%; /* Tamaño de la imagen */ height: 200px; /* Alto del botón */ width: 200px; /* Ancho del botón */ display: table; border-radius: 100%; cursor: pointer; box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active { ...

seguir »

Texto con borde

Escribí los estilos de todos los estados de tus botones en pocas líneas de CSS aprovechando la propiedad filter.

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS? SI ES POSIBLE NOTA : Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox. Para lograrlo, debemos aplicar la propiedad text-shadow para lograr muchas sombras del mismo color simulando un sólo borde. A <div class="texto1"> Texto </div> le aplicaremos: .texto1 { color:white; /* Color del texto */ text-shadow: 1px 1px 0 blue , -1px -1px blue , 1px -1px blue , -1px 1px blue , 0 1px blue , 1px 0 blue , -1px 0 blue , ...

seguir »

BlogDesign

Buscar este blog