Botones para página web con diseños personalizados - HTML/CSS. Generador de botones al final del post.
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. En este post les voy a mostrar cuatro tipos de botones personalizados creados con html y css.
Pasos para crear 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 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 href ="https://www.edeptec.com/" class="boton1">Click aquí</a>
Explicación:
En el atributo href, donde he colocado https://www.edeptec.com, debes sustituirlo por la ruta a la que quieres dirigir el botón.
En el atributo class donde he escrito boton1 puedes escribir cualquier nombre que le quieras asignar a la clase.
"Click aquí", es el texto del botón.
El código CSS
Ahora que ya hemos creado nuestro botón, toca personalizar su aspecto a través del código CSS. 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.
<style type ="text/css">.boton1{/*propiedades css*/}</style>
Lista de propiedades css utilizadas en el diseño de los botones:
text-decoration: none;padding:20px;font-weight: bold;font-size: 30px;color:black;background:black;border-radius:50px;border: 3px solid black;transition: all 0.9s;text-align: center;width:40%;box-shadow: -5px 1px 3px 0px rgb(248, 70, 0);
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.
Transition, tiempo de transición.
Text-align, es la alineación del texto que esta dentro del botón.
Width, tamano del botón.
Box-shadow, sombra del botón.
Ejemplos de botones:
Diseño 1:
Codigo:HTML:
<a href ="https://www.edeptec.com/" class="boton1">Click aquí</a>
CSS:
.boton1{text-decoration: none;display:inline-block;width:50%;padding:20px;border: 3px solid black;border-radius:50px;text-decoration: none;color:black;font-weight: bold;transition: all 0.9s;text-align: center;font-size: 30px;}.boton1:hover{background:black;color:white;}
Diseño 2:
Codigo HTML:
<a href ="https://www.edeptec.com/" class="boton2">Click aquí</a>
CSS:
.boton2{text-decoration: none;display:inline-block;width:50%;padding:20px;text-align: center;font-weight: bold;color:white;background: red;transition: all 0.5s ease;font-size: 30px;box-shadow: #ccc;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.8);}.boton2:hover{color:red;background: white;border: 3px solid red;box-shadow:NONE;}
Diseño 3:
Codigo HTML:
<a href ="https://www.edeptec.com/" class="boton3">Click aquí</a>
CSS:
.boton3{text-decoration: none;display:inline-block;width:60%;padding:20px;background: rgb(12, 143, 12);width:40%;text-align: center;color:white;font-size: 30px;font-weight: bold;transition: all 0.3s ease;box-shadow: 0px 0px 20px 5px rgb(21, 248, 0);}.boton3:hover{box-shadow: 0px 0px 20px 5px rgb(248, 244, 0);}
Diseño 4:
Codigo HTML:
<a href ="https://www.edeptec.com/" class="boton4">Click aquí</a>
CSS:
.boton4{text-decoration: none;display:inline-block;width:50%;padding:20px;background: rgb(143, 143, 143);width:40%;text-align: center;color:white;font-size: 30px;font-weight: bold;transition: all 0.9s ease;box-shadow: -5px 1px 3px 0px rgb(248, 70, 0);border-radius: 10px 30px;}.boton4:hover{background: rgb(182, 187, 182);color:rgb(126, 126, 126);box-shadow:none;border-radius: 10px;}
Publicar un comentario