Crear un boton fantasma en CSS

Los botones fantasmas son botones transparentes y vacíos que tienen una forma básica como un rectángulo. Por lo general tienen una línea muy delgada en el borde, mientras que la sección interna consiste de texto. Suelen también llamarse botones “vacíos” o “huecos” y suelen ser más grandes que los botones estándar. Se los denomina fantasma porque a pesar de ser transparentes pueden captar la atención del usuario inmediatamente. Los botones fantasma van mejor con sitios y aplicaciones que tienen una interfaz minimalista que use fondos a gran escala.

Estructura:
Lo único que necesitamos para este ejemplo es un enlace que colocaremos en el centro de la pantalla y un div que lo contenga.

CSS:
Primero definimos el fondo para que muestre una imagen todo a lo ancho de la pantalla.

Modificamos la posición del div y le hacemos ocupar todo el ancho y alto de la pantalla.

Definimos las propiedades del botón.

Por ultimo agregamos las propiedades del ratón cuando se posicione en el botón.

 

facebook Crear un boton fantasma en CSStwitter Crear un boton fantasma en CSSgoogle Crear un boton fantasma en CSSdiggit Crear un boton fantasma en CSSpinterest Crear un boton fantasma en CSSlinkedin Crear un boton fantasma en CSSprint Crear un boton fantasma en CSSemail Crear un boton fantasma en CSSSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.