[TUTORIAL] Crear un Botón Fantasma (Ghost Button) en CSS



En este tutorial les mostramos como crear un Botón Fantasma o Ghost Button utilizando CSS para la apariencia completa. Los botones fantasmas han tomado relevancia en el diseño web actual y en las últimas tendencias de diseño de interfaces.

El lenguaje de programación CSS facilita la manipulación de cada detalle e incluso la apariencia cuando se interactúa con el botón; pasaremos de un botón solo contorneado a un botón con un relleno de color cuando se pase el cursor encima (Mouse Over).

Duración: 4:00 min
Nivel: Principiante | Intermedio
Lenguajes de Programación: HTML y CSS
Software: Dreamweaver CC 2017




Script:
01. Crear un nuevo documento en HTML y guardar como “BotonEnCSS.html” * Mantener la extensión “.html”

02. Crear un DIV con la clase “botonCSS” que servirá como contenedor del botón. Dentro del DIV se agrega el texto del botón: BOTÓN EN CSS encerrado con la etiqueta



<div class="botonCSS">
 <a>BOTÓN EN CSS</a>
</div>


03. Agregar una FUENTE de CSS seleccionando “Definir en Página”. Se agrega automáticamente la etiqueta dentro de la etiqueta .

<style type="text/css">
</style>



04. Dentro de la etiqueta  utilizando CSS se crea la regla para modificar la apariencia del contenido de la etiqueta

selector {
propiedad: valor;
  }

Se definen las propiedades y valores para crear la apariencia del botón.


<style type="text/css">

a {
font-family: Open Sans;
color: #ff5f00;
background-color: #fff;
border: 1px solid;
border-radius: 15px;
padding: 20px 50px;
display: inline-block;
text-decoration: none;
}



</style>


05. Crear otra regla CSS añadiendo al selector “:hover” para manipular la apariencia cuando el cursor pase sobre el botón (Mouse Over)

selector:hover {
propiedad: valor;
  }

<style type="text/css">

a {
font-family: Open Sans;
color: #ff5f00;
background-color: #fff;
border: 1px solid;
border-radius: 15px;
padding: 20px 50px;
display: inline-block;
text-decoration: none;
}

a:hover {
background-color: #ff5f00;
color: #fff;
}


</style>


06. En el código HTML se pueden añadir atributos para manipular el estilo del cursor al realizar MouseOver y en el DIV se puede asignar la alineación.



 <div class="botonCSS" align="center">
 <a href="#">BOTÓN EN CSS</a>
</div>


Para mas tutoriales en video puede visitar nuestro canal en YOUTUBE














No hay comentarios:

Publicar un comentario en la entrada