10 bibliotecas y marcos de botones CSS gratuitos de alta calidad

Cuando lo piensas, los botones son los impulsores de la interacción en línea. Los usamos para agregar productos a nuestros carritos de compras, obtener más información sobre un servicio, confirmar nuestras decisiones y enviar formularios de contacto.

De esa manera, hacer clic en un bot√≥n es algo as√≠ como la conclusi√≥n exitosa a la que los dise√Īadores intentan llegar. Es por eso que es tan importante elegir botones que se vean bien y proporcionen se√Īales visuales obvias.

Con eso en mente, hemos encontrado una colección de bibliotecas de botones CSS que puede usar para impulsar la interacción en sus propios proyectos web. ¡Disfrutar!

bttn.css: botones impresionantes para proyectos increíbles

bttn.css es una colecci√≥n de botones de estilo ligero que presentan diferentes formas, tama√Īos y colores. Todos los estilos se pueden invocar con nombres de clase simples. Con el archivo CSS minimizado llegando a solo 4kb, esta biblioteca tambi√©n es bastante ligera.

bttn.css: botones impresionantes para proyectos increíbles

Botones: una colección de botones CSS

El t√≠tulo puede ser simple, pero Buttons es una biblioteca con m√°s de 20 colecciones de estilos para elegir. Destacan el Delta ligeramente vidrioso, la divertida y atrevida Theta, el espacioso y minimalista Mu y Phi similar al teclado. Aseg√ļrese de revisar los efectos de clics ultra geniales en la demostraci√≥n.

Botones: una colección de botones CSS

Botones: una biblioteca de botones CSS construida con Sass & Compass

No debe confundirse con la otra biblioteca llamada, ejem, Botones. Esta biblioteca contiene botones CSS simples y atractivos en una variedad de formas. Los extras adicionales incluyen estilos de botones de iconos que utilizan FontAwesome.

Botones: una biblioteca de botones CSS construida con Sass & Compass

Botones Pushy – Botones 3D Pressable CSS

Los botones pulsadores pueden no ser el conjunto m√°s elegante que encontrar√°s, pero son coloridos y f√°ciles de ver en una multitud. Adem√°s, proporcionan un rebote extra√Īamente satisfactorio cuando se hace clic. Al final, ¬Ņno es todo lo que realmente necesitamos de un bot√≥n?

Botones Pushy - Botones 3D Pressable CSS

btns.css: un peque√Īo marco de botones CSS para uso personal y comercial

Personalmente, me gustan los botones que hacen uso de transiciones CSS suaves. btns.css hace un gran trabajo con transiciones de color sutiles en el desplazamiento e incluso versiones que se expandir√°n y reducir√°n el tama√Īo.

btns.css: un peque√Īo marco de botones CSS para uso personal y comercial

Press.css: una biblioteca de botones plana, ligera y escalable influenciada por las pautas de dise√Īo de materiales de Google

Press.css proporciona botones planos de gran apariencia en cualquier tama√Īo, forma y color que necesite. Con solo tres efectos incluidos, el tama√Īo del c√≥digo se mantiene al m√≠nimo (12kb). Tambi√©n funcionan a la perfecci√≥n con los iconos FontAwesome.

Press.css: una biblioteca de botones plana, ligera y escalable influenciada por las pautas de dise√Īo de materiales de Google

Efectos de desplazamiento del botón CSS3 con FontAwesome

Una versión interesante de su botón de icono tradicional, CSS3 Button Hover Effects con FontAwesome solo revela el icono durante el estado de desplazamiento. Al pasar el mouse sobre un botón, se activa una transición suave de CSS que muestra un ícono FontAwesome a la vista, ya sea junto o en lugar de texto. Parte de una gran colección de botones CSS de CodePen.

Efectos de desplazamiento del botón CSS3 con FontAwesome

Botones sociales para Bootstrap: botones de inicio de sesión social hechos en CSS puro basado en Bootstrap y Font Awesome

Los botones sociales para Bootstrap combinan la bondad del marco Bootstrap con los iconos FontAwesome. Se incluyen todas las grandes redes sociales, m√°s de 20 en total. Hay clases para cada red, junto con clases para diferentes tama√Īos. Los colores est√°n hechos para combinar con cada servicio respectivo.

Botones sociales para Bootstrap: botones de inicio de sesión social hechos en CSS puro basado en Bootstrap y Font Awesome

beautons – Un juego de herramientas de botones maravillosamente simple

beautons es una biblioteca de botones que tiene que ver con la simplicidad. Elija entre varios tama√Īos, estilos y estados de botones. Las clases CSS se pueden combinar para mezclar y combinar diferentes estilos.

beautons - Un juego de herramientas de botones maravillosamente simple

Botones obvios: una alternativa de Bootstrap entre el 2.0 graduado y el 3.0 completamente plano

Construidos con MENOS, los botones obvios son coloridos, atractivos y fáciles de personalizar. También proporcionan un efecto animado simple cuando se hace clic.

Botones obvios: una alternativa de Bootstrap entre el 2.0 graduado y el 3.0 completamente plano

Botones web gruesos 3D de Orman Clark

Chunky 3D Web Buttons de Orman Clark no es solo una colección de botones sexys. También es un tutorial completo que demuestra cómo se hicieron. Para que pueda comenzar con lo básico y continuar agregando sus propios toques.

Botones web gruesos 3D de Orman Clark: la versión CSS3

Botones radiactivos: cree botones atractivos y atractivos mediante animaciones CSS

Lo que separa a los botones radiactivos son los interesantes efectos de desplazamiento que se pueden agregar. Por ejemplo, al desplazarse puede producir un cambio sutil de color pulsante (como si el bot√≥n fuera realmente radiactivo). Esto se realiza mediante el bucle de una transici√≥n CSS un n√ļmero determinado de veces. El resultado es un bot√≥n divertido que llama la atenci√≥n.

Botones radiactivos: cree botones atractivos y atractivos mediante animaciones CSS

Se trata de esos clics

Los botones a menudo pueden pasarse por alto al armar un sitio web. Despu√©s de todo, generalmente no ocupan mucho espacio en la pantalla y no son el elemento de dise√Īo m√°s emocionante. A√ļn as√≠, utilizar el correcto puede llamar la atenci√≥n y alentar un clic. Observe c√≥mo varias de las bibliotecas anteriores usan interesantes efectos de desplazamiento y clic. Este tipo de efectos puede aportar un poco de diversi√≥n funcional a los botones y mejorar la experiencia de usuario general.

La pr√≥xima vez que dise√Īe un sitio web o trabaje en un llamado a la acci√≥n (CTA), piense en los botones como algo m√°s que un simple elemento de dise√Īo. Piense en ellos como la puerta de entrada a los objetivos de sus sitios. El uso de una de las bibliotecas presentadas anteriormente realmente puede marcar la diferencia en sus tasas de conversi√≥n.