Crear botones fantasmas con CSS

Hace un tiempo comente la manera de crear los típicos botones fantasmas, una tendencia muy popular de diseño en páginas web de este año 2014. Para los que no lo conozcan, básicamente es una forma plana básica, es un botón rectangunlar con un borde delgado y un color de fondo transparente, su 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. 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.

Este botón son muy populares en las páginas que utilizan pantalla completa sitios de fotografía, de una página y los que tienen esquemas de diseño minimalista o casi planos, porque este sencillo estilo de botón no interfiere la imagen tanto como un botón tradicional.

En el artículo How to Create Ghost Buttons With CSS, editado por realcombiz.com, nos muestra la manera de crear diferentes variantes de estos botones con CSS, además nos deja una selección de páginas que los emplean havilmente para que veas su utilidad.

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

Botones fantasmas con CSS

 

Artículos relacionados