Pasos para crear nuestro boton
El código HTML5
Para crear nuestros botones personalizados lo primero que debemos hacer es teclear el código HTML5, el cual deberemos colocarlo allí donde queramos ubicar nuestro botón. Para ello podríamos utilizar dos elementos, el elemento <a> , o el elemento <input> ambos tipos son personalizables, pero el elemento <input> trae consigo estilos por defecto que pueden alterar nuestro botón en los diferentes navegadores y dispositivos. Por eso, para hacerlo más sencillo, utilizaremos el elemento <a> el cual también tiene estilo por defecto pero resulta mucho más manejable.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.
1
2
3
4
5
6
7
8
9
10
11
12
| <style type="text/css"> .boton_personalizado{ text-decoration: none; padding: 10px; font-weight: 600; font-size: 20px; color: #ffffff; background-color: #1883ba; border-radius: 6px; border: 2px solid #0016b0; }</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í.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style type="text/css"> .boton_personalizado{ text-decoration: none; padding: 10px; font-weight: 600; font-size: 20px; color: #ffffff; background-color: #1883ba; border-radius: 6px; border: 2px solid #0016b0; } .boton_personalizado:hover{ color: #1883ba; background-color: #ffffff; }</style> |
No hay comentarios:
Publicar un comentario