Clicky

Cómo hacer un botón fantasma en CSS3

Categoría: Internet (Tutoriales y trucos)
Visitas: 7147
Los cazafantasmas

Se conocen como botones de fantasma porque tienen sólo un esbozo

Con Halloween a pocos días de distancia, este parece ser el momento perfecto para explicar cómo crear en puro CSS un botón fantasma increíblemente simple.

Estos botones se conocen como botones de fantasma porque tienen sólo un esbozo y dejan lo que esté detrás de ellos mostrándolo a través. Son increíblemente populares entre las nuevas startups, ya que tienen una simplicidad mínima que se ajusta a ese estilo de sitio.

También son muy fáciles de hacer, y se puede agregar un impacto real con sólo unas pocas líneas de CSS.

Para construir uno la primera cosa que se necesita es un simple enlace en HTML. A los efectos de este artículo vamos a crear uno con una clase llamada fantasma y vamos a poner todo nuestro CSS en el encabezado del documento HTML (Probablemente querrás poner el CSS en un archivo externo si utilizas este botón en un lugar en producción).

Así es cómo se verá resultado final:

El HTML

Aquí está el código HTML que se necesita:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div>
            <a class="fantasma" href="http://www.ghostbusters.com/">¿A quién vas a llamar?</a>
        </div>
    </body>
</html>

Este código simple es sólo una página básica en HTML con un enlace.

El CSS

Todo nuestro CSS va dentro de las etiquetas de estilo.

En primer lugar, queremos establecer nuestra página. No hay nada especial aquí, sólo unas líneas de estilos para que no estemos viendo una página en blanco:

body, div
{
    width:100%;
    height:100%;
    margin:0;
    background:#545e7a;
    position:absolute;
}

A continuación queremos colocar el botón en el centro de la página:

.fantasma
{
    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%);

Este código cambia el enlace para ser inline-block, en lugar de inline. Esto es importante ya que los botones fantasmas casi siempre se asientan en su propio espacio. A continuación, se coloca position a relative y en la parte superior izquierda del final que será 50% y 50% (en otras palabras en el medio de la página).

Porque queremos que el centro del botón esté en el centro de la página (no en la esquina superior izquierda), utilizamos translateX y translateY para compensarlo por la mitad de su propio ancho. Esta es una gran técnica para centrar casi cualquier cosa. Es muy eficaz, ya que lee el desplazamiento desde el tamaño del elemento, por lo que si más tarde cambiamos el texto de la etiqueta, no tendremos que volver y ajustar nuestro CSS para acomodar el cambio.

Ahora, tenemos que añadir los estilos de texto del botón fantasma:

    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 3em;
    letter-spacing: 0.1em;
    color:#ffffff;

Esto es muy simple. Se inicia con una pila de fuente (por cortesía de cssfontstack.com), los botones fantasmas siempre utilizan fuentes modernas, sans-serif, por lo que también lo haremos. También queremos asegurarnos de que fijamos el tamaño de la fuente bonita y grande, usando ems; eso significa que podemos cambiar el tamaño de la fuente padre y más tarde en el botón responderemos. Los botones fantasma tienden a ser un poco más espaciados que el texto normal, así que agregaremos una pequeña cantidad de espaciado entre letras. Por último, los botones fantasmas son casi siempre blancos. Tenemos que asegurarnos de que hay una cantidad adecuada de contraste, pero nosotros ya hemos establecido el fondo de la página a un mal humorado color púrpura, así que el blanco quedará muy bien.

Ahora tenemos que modificar un poco el texto:

    text-decoration:none;
    text-transform:uppercase;
    text-rendering:optimizeLegibility;

La primera línea se deshace del subrayado por defecto del enlace. La siguiente línea convierte la etiqueta del enlace a mayúsculas, que es como suelen presentarse los botones de fantasmas. La última línea utiliza text-rendering para mejorar su legibilidad.

A continuación añadiremos un bonito borde grueso, que es una de las características clave de un botón fantasma. Y debido a que el border está muy apretado con el relleno por defecto, tenemos que añadir un poco más:

    border:0.15em solid #fff;
    padding:0.4em 0.6em;

Por último para este bloque, queremos añadir una transición de tres propiedades de relación diferentes. Queremos animar el color (color), el fondo (background) y el color del borde (border-color).

Una de las características clave de un botón fantasma es que se invierte cuando se pasa sobre él, así que vamos a establecer el fondo, el color de la fuente y el color del borde en un momento, pero primero vamos a establecer la transición a las mismas propiedades.

Transiciones CSS son realmente fáciles de agregar. Sólo se tiene que especificar la propiedad para animar y la velocidad a animar (también puedes agregar easing si quieres). Si deseas animar más de una propiedad las separas con una coma y, por supuesto, asegúrate de que la línea del prefijo del navegador (browser prefixed line) coincide con la línea regular.

En nuestro caso, estamos estableciendo las propiedades para interpolar durante períodos más largos fraccionados, sólo para dar a la animación un poco más de interés:

    -webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;

Luego cerramos el bloque de estilo para la clase fantasma:

}

A continuación, añadimos un bloque para definir los estilos de hover. Para un botón fantasma clásico, queremos que el color del texto cambie para que coincida con el fondo de la página, entonces queremos que el fondo del botón se rellene para que coincida con el color del borde.

Y, en nuestro caso, vamos a cambiar el color del borde y fondo a un color verdaderamente horrible que sólo Slimer agradecería:

.fantasma:hover
 {
     background:#91f21b;
     border-color:#91f21b;
     color:#545e7a;
 }

Y eso es todo, un estilo de botón muy a la moda que le da un toque minimalista a cualquier página y es fácil de implementar.

Para la copia y los parches, aquí está el código completo:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, div
            {
                width:100%;
                height:100%;
                margin:0;
                background:#545e7a;
                position:absolute;
            }
            .fantasma
            {
                /* centrado */
               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%);
                /* text styles */
                font-family: Tahoma, Verdana, Segoe, sans-serif;
                font-size: 3em;
                letter-spacing: 0.1em;
                color:#ffffff;
                /* modify text */
                text-decoration:none;
                text-transform:uppercase;
                text-rendering:optimizeLegibility;
                /* add a border */
                border:0.15em solid #fff;
                padding:0.4em 0.6em;
                /* animate the change */
                -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 300ms, background 500ms, border-color 700ms;
            }
            .fantasma:hover
            {
                background:#91f21b;
                border-color:#91f21b;
                color:#545e7a;
            }
        </style>
    </head>
    <body>
        <div>
            <a class="fantasma" href="http://www.ghostbusters.com/">¿A quién vas a llamar?</a>
        </div>
    </body>
 </html>