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
<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>
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.
<a href="#">BOTÓN EN CSS</a>
</div>
Para mas tutoriales en video puede visitar nuestro canal en YOUTUBE
Publicar un comentario