Crear boton HTML5 y CSS3
Los botones a día de hoy siguen siendo 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. El objetivo será conseguir botones profesionales con el que poder conseguir más visitas en nuestro sitio web o bien conseguir llamar la atención de los usuarios para captar algún tipo de conversión.
Al lío!
2 simples pasos para crear tus botones personalizados
- El código HTML5
Para crear un botón personalizado lo primero que debemos hacer es teclear el código HTML5, el cual deberemos colocarlo allí donde queramos ubicar en nuestro sitio web. 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 atractivo y manejable.
Código:
Y ahora la explicación:
En el atributo href, donde he colocado https://flaviogarcia.es/, debes sustituirlo por la ruta a la que quieres dirigir el botón, por ejemplo:
Imaginemos que queremos comentarle a nuestros visitantes que tenemos un nuevo artículo en nuestro blog, entonces demos poner la url destino, www.tuweb.es/blog/articulo-nuevo/.
En el atributo class donde he escrito boton_personalizado puedes escribir cualquier nombre que le quieras asignar a la clase, por ejemplo: «Botón_artículo_nuevo».
Recuerda mantener las comillas “”, es MUY importante.
-
El código CSS3
<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:2pxsolid#0016b0;}</style>
Y ahor la 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 y mi esto en especial, me molesta.
Padding es la distancia entre el texto y el borde del botón. En este caso está establecido en pixeles «px».
Font-wheight se trata del grosor de las letras. Mientras más alto sea su número, más gruesas serán, así que ojo.
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. También podemos añadir una image, pero queda horrible.
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í.
<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:2pxsolid#0016b0;}.boton_personalizado:hover{color:#1883ba;background-color:#ffffff;}</style>
Y ahora la 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.
¿Que te parece este botón?, ¿te ha servido para tu sitio web?
Ahora..¿Puedes ayudarme tú compartiendo este artículo?
¡Mil gracias!
Artículos recomendados para ti.
No SPAM lo prometo!
@FlavioGarciaSeo
Latest posts by @FlavioGarciaSeo (see all)
- pagina-web-gratis-asociaciones-beneficas - 29 octubre, 2023
- Empresas en remoto. Ofertas de internet, conexión en casa y mas herramientas. - 1 febrero, 2023
- La elección de compañías de Internet es fundamental para tu negocio - 4 noviembre, 2022
