Los botones son una parte fundamental de nuestra web. Aparte de ser un simple lugar donde puedes hacer clic, los botones deben saber llamar la atención al usuario sin ser excesivamente molestos, se deben entender y tener un acabado profesional. Para ello me propongo a enseñaros como crear botones personalizados con HTML5 y CSS3. Se trata de una tarea sencilla, de nivel muy básico, práctica y muy flexible, que nos permitirá personalizar 100% nuestro botón. El objetivo será conseguir botones como este y daros algunos ejemplos más al final de la entrada:
Un consejo
Cuando yo empecé en la programación todo me parecía muy abstracto, la solución para mi fue hacerme con una serie de libros (sí, libros físicos de los de antes) que me ayudaron a disponer de unos contenidos ordenados asequibles y tangibles. Por si alguien se encuentra ahora mismo en esta situación, para empezar con la programación web os recomiendo el libro «El gran libro de HTML5, CSS3 y JavaScript». Este libro os dará una base de conocimientos muy útil para desde aquí seguir creciendo.
Los pasos para crear tus botones personalizados.
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.
Código:
<a class="boton_personalizado" href="https://vistoenlared.es">Soy un botón</a>
Explicación:
En el atributo href, donde he colocado https://vistoenlared.es, debes sustituirlo por la ruta a la que quieres dirigir el botón.
En el atributo class donde he escrito boton_personalizado puedes escribir cualquier nombre que le quieras asignar a la clase.
Recuerda mantener las comillas «».
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: #1883ba;
border-radius: 6px;
border: 2px solid #0016b0;
}
</style>
Explicación:
Text-decoration se refiere a la decoración del texto, deberemos establecerlo en none a no ser que queramos tener el texto del botón subrayado.
Padding es la distancia entre el texto y el borde del botón. En este caso está establecido en pixeles.
Font-wheight se trata del grosor de las letras. Mientras más alto sea su número, más gruesas serán.
Font-size es el tamaño se la letra, en este caso, también en pixeles.
Color se refiere al color de la letra. Podremos personalizarlo fácilmente con un código HEX, RGB o incluso RGBA.
Background-color es el color de fondo del botón.
Border-radius se trata del redondeado de los cantos de botón. Mientras más pixeles asignemos, más redondeados serán los bordes. Si, lo que queremos es un botón sin bordes redondeados, lo eliminaremos.
Border es del borde del botón. Podremos asignar un grosor en pixeles y un color.
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: #1883ba;
border-radius: 6px;
border: 2px solid #0016b0;
}
.boton_personalizado:hover{
color: #1883ba;
background-color: #ffffff;
}
</style>
Explicación:
Dentro del hover colocaremos todo aquello que queremos que se modifiquen al pasar el ratón por encima con los valores que queremos establecer.
Resultado:
Aquí tienes algunos ejemplos más de botones
Botón 1
código html botón 1
<a href="" class="boton_1">Soy un botón</a>
código css botón 1
<style type="text/css">
.boton_1{
text-decoration: none;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
font-family: helvetica;
font-weight: 300;
font-size: 25px;
font-style: italic;
color: #006505;
background-color: #82b085;
border-radius: 15px;
border: 3px double #006505;
}
.boton_1:hover{
opacity: 0.6;
text-decoration: none;
}
</style>
Botón 2
>
código html botón 2
<a href="" class="boton_2">Soy un botón</a>
código css botón 2
<style type="text/css">
.boton_2{
text-decoration: none;
padding: 40px;
font-family: arial;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
font-weight: 800;
font-size: 25px;
color: black;
background-color: #9b0e0e;
}
.boton_2:hover{
color: #9b0e0e;
background-color: #bc6355;
text-decoration: none;
}
</style>
Comentarios
6 respuestas a «Crear botones personalizados con HTML5 y CSS3»
[…] unas semanas escribí un post sobre cómo crear botones personalizados con HTML5 y CSS pero, claro está que, cuando no entiendes un lenguaje todo resulta mucho más complicado y eso […]
GRACIAS, MUY BUENA INFORMACIÓN, ÉXITO CON TU TRABAJO,ESTA ES UNA BUENA PÁGINA.
¡Muchas Gracias Erendira Rubio! Estamos a vuestra disposición.
Me encantó, llevaba mucho tiempo buscando algo así. Aunque tengo una duda, si quisiera poner una imagen en vez de texto ¿cómo sería?, perdón, soy nueva en esto
Buenos días Ana. Nos alegramos de que te gustara. En el caso de querer incluir una imagen se podría incluir una etiqueta de IMG dentro de la etiqueta del enlace en lugar del Texto.
Ejemplo:
Espero que te sirva
Hola que tal!
Muy buena guía muy sencilla.
Pero me surge una duda:
Cómo hacer el botón responsive?
Creo botones muy majetes, pero en la versión móvil no se adaptan y quedar cortados en trozos.
Un saludo!
Manu