Close

septiembre 5, 2018

5 ideas para botones

5 ideas geniales para botones

Crear elementos para nuestras interfaces puede ser difícil, sobre todo si no disponemos de la inspiración. Los botones, son super importantes en nuestras páginas web, y tener ideas en mente para hacerlos tan llamativos como sea posible es muy bueno, por eso en este artículo te presentamos 5 ideas geniales para botones. Estos de seguro te ayudarán a encontrar esa inspiración o ideas que puedas implementar!

1- Botones de redes sociales

Mira el pen completo:  Stylish Social Buttons por Chris Deacy (@chrisdothtml) en CodePen.

Este pen de Chris Deacy nos da una idea genial sobre micro interacciones en nuestros botones para las redes sociales. Que pueden ir en nuestro footer o en otras secciones de la web. Funciona aprovechando los selectores :before para agregar elementos y modificar su posición, color y escala con el selector :hover.

2- Botones fantasma con bordes con gradientes

Mira el pen completo: Gradient Ghost Buttons por Alex (@akwright) en CodePen.

Este pen genial por Alex nos enseña una de las formas que podemos colocarles bordes con gradientes a los botones. Esto se puede hacer con SVG o como lo hace él, con box-shadow. Es sin duda un acercamiento interesante, y esto puede ayudarnos a darle un toque mayor a nuestros botones fantasmas.

3- Efectos hover para botones

Mira el pen completo: Collection of Button Hover Effects por David Conner (@davidicus) en CodePen.

Los efectos hover son muy importantes en nuestra web, sobre todo en botones, y este pen de David Conner nos enseña un par de efectos que podemos usar en nuestros botones para que estos llamen más la atención y nuestros usuarios se sientan cómodos y reciban un buen feedback cuando pasen el mouse por encima.

Artículo relacionado:  6 sitios de inspiración para tu página

4- Buttons CSS

Mira el pen completo: Button.css: CSS3 Button Animations por Zixuan(Kevin) Fan (@kevinfan23) en CodePen.

Buttons.CSS, creador por Zixuan(Kevin)Fan es una colección genial de animaciones en hover para botones, que pueden servirte para distintas ocasiones, la cantidad de efectos que tiene varían mucho y permiten que los uses en diferentes casos donde pueden verse genial.

5- Botón con efecto hover vía SVG

Mira el pen completo: SVG Button hover effect with snap.svg por Joost Kiens (@JoostKiens) en CodePen.

Este pen genial de Joost Kiens, nos muestra los efectos geniales que podemos obtener al mezclar propiedades SVGs con javascript. El efecto es bastante genial, pero al utilizar javascript puede hacerse pesado para algunas personas que visiten la página desde navegadores antiguos. Sin embargo, el efecto es genial y dejará a más de uno sorprendido.

En conclusión

El uso de los botones es increíblemente importante a la hora de crear una página. Si no logramos llamar la atención del usuario con ellos, estaremos en un gran problema. El repasar por estas ideas y saber las propiedades que podemos manipular o usar para poder obtener resultados que dejen a nuestros usuarios sorprendidos es muy importante para poder construir cosas que se vean interesantes y resalten un montón. Gracias por leer y que tus códigos sigan haciendo cosas geniales!

Deja un comentario

A %d blogueros les gusta esto: