Francisco Javier González García

Compartir en Facebook Compartir en Twitter

Crear Botones Personalizados

EL CÓDIGO HTML5

Para crear botones personalizados lo primero que debemos hacer es teclear el código HTML5,y colocarlo allí donde queramos ubicar nuestro botón.

 

Soy un botón

 

Código:

<a class="boton_personalizado" href="https://franciscogonzalez.page">Soy un botón</a>

El Código CSS3

Ahora que ya hemos creado nuestro botón, toca personalizar su aspecto a través del código CSS3. Este código debes pegarlo entre las etiquetas <head> y </head> de tu documento HTML. También puedes utilizar hojas css. Debemos tener en cuenta que deberemos crear la clase con el nombre que le hemos asignado al atributo class en nuestro código HTML5.

Código:

<style type="text/css"> .boton_personalizado{ text-decoration: none; padding: 10px; font-weight: 600; font-size: 20px; color: #ffffff; background-color: #00acee; border-radius: 6px; border: 2px solid #00acee; } </style>

El Hover

Ahora falta definir qué ocurre cuando pasamos el ratón por encima de nuestro botón, esto lo haremos asignándole un hover a nuestra clase. Por lo que nuestro código CSS3 quedaría así.

Código:

<style type="text/css"> .boton_personalizado{ text-decoration: none; padding: 10px; font-weight: 600; font-size: 20px; color: #ffffff; background-color: #00acee; border-radius: 6px; border: 2px solid #00acee; } .boton_personalizado:hover{ color: #00acee; background-color: #ffffff; } </style>

NOTA IMPORTANTE: Dentro del hover colocaremos todo aquello que queremos que se modifique al pasar el ratón por encima. Puedes establecer tus propios códigos de colores favoritos. En el botón de ejemplo el color es: #00acee (azul twitter)

 

Siguiente