Tutorial para crear un botón fantasma con CSS

Una tendencia muy popular de diseño en páginas web de este año 2014, es el denominado "botón fantasma", para los que no lo conozcan, básicamente es un botón con un borde y un color de fondo transparente.

Los botones fantasmas son botones transparentes y vacíos que tienen una forma básica como un rectángulo o quizás un cuadrado. Por lo general tienen una línea muy delgada en el borde, mientras que la sección interna consiste en texto simple con una tipografía sans-serif.

Esos botones son conocidos a veces como botones “vacíos” o “huecos” y suelen ser más grandes que los botones coloreados estándar.

El atributo “fantasma” es debido al hecho de que, aunque son transparentes como fantasmas, inmediatamente captan la atención del usuario, de la misma manera en la que una historia de fantasmas puede captarla.

Un botón hueco bonito realiza el truco mágico de incorporarse en un sitio sin llamar la atención, pero si es colocado con un fondo adecuado y una buena posición su resultado es optimo.

Aunque puedes encontrar botones fantasma en una gran variedad de páginas web, no son apropiados para todos los sitios. Van mejor con sitios y aplicaciones que tienen una interfaz minimalista o plana que use fondos a gran escala, como el ejemplo de la página de abajo (Lees Ferry).

botón fantasma

Estos tipos de botones se pueden realizar de una manera muy sencilla y elegante con CSS, como muestra puedes dar un vistazo al artículo How to Create CSS Ghost Buttons, editado por sixrevisions.com, donde te muestran la manera de editar y crear varios estilos de botones fantasma usando CSS.

Puedes ver la vista previa de los diferentes estilos propuestos, para que te hagas una idea de los resultados.

 

Artículos relacionados