Crear un boton fantasma en CSS

Actualizado el domingo, 19 junio, 2016

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.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Botón fatasma</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <a class="ghost" href="https://www.sololinux.es/">Entrar en la web</a>
    </div>
</body>
</html>

CSS:
Primero definimos el fondo para que muestre una imagen todo a lo ancho de la pantalla.
body {
    background: black;
    background-image: url(fondo.jpg);
    background-size: cover;
}

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

div {
    position: absolute;
    width: 99%;
    height: 99%;
    margin: 0;
}

Definimos las propiedades del botón.

.ghost {

    /* utilizamos estas propiedades para centrar el botón */
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    /* definimos los estilos del texto */
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 3em;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;

    /* agregamos un borde y lo separamos del texto */
    border: 0.15em solid #fff;
    padding: 0.4em 0.6em;

    /* animamos el cambio de colores */
    -webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}

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

.ghost:hover {
    background: #819C68;
    border-color: #819C68;
    color: black;
}

 

Agregar comentario