Como crear botones de funciones en HTML, que pueden ser usados como funciones, características, y mas.
Hace unos días creando una plantilla de WordPress para un cliente, este me preguntó si podía hacer que sus clientes accedieran de forma fácil a las diferentes funciones del su sitio, así que le hice algo simple pero funcional. Este código es bien simple y esta elaborado de forma estática, pienso que para el futuro hare una actualización que tomara esto mismo y lo modificare para ser dinámico y reusable.
Para mas detalles sobre el código fuente, aquí abajo esta el ejemplo funcional en codepen. Si deseas hacerlo local en tu maquina, asegúrate de incluir la libreria Fontawesome.
Aqui les dejo el codigo HTML
Los botones de funciones dentro de <body>
La explicación es bien sencilla. Vamos a crear una serie de botones en columnas, las cuales vamos a utilizar para tener acceso a diferentes características de nuestra pagina. Cada botón tendrá un icono que representara un atributo o zona especifica que deseamos divulgar a nuestro publico.
<div class="row">
<div class="col-2">
<div class="card">
<a href="#">
<i class="fas fa-map-marked-alt"></i>
<h3>Feature</h3>
</a>
</div>
</div>
<div class="col-2">
<div class="card01">
<div class="imgas">
<i class="fab fa-glide-g"></i>
</div>
<div class="container">
<h3>Name</h3>
<h4>Title</h4>
<ul class="social-icon"></ul>
</div>
</div>
</div>
<div class="col-2">
<div class="card">
<a href="#">
<i class="fas fa-route"></i>
<h3>Feature</h3>
</a>
</div>
</div>
<div class="col-2">
<div class="card">
<a href="#">
<i class="fab fa-creative-commons-remix"></i>
<h3>Feature</h3>
</a>
</div>
</div>
<div class="col-2">
<div class="card">
<a href="#">
<i class="fas fa-align-center"></i>
<h3>Feature</h3>
</a>
</div>
</div>
<div class="col-2">
<div class="card">
<a href="#">
<i class="fab fa-linode"></i>
<h3>Feature</h3>
</a>
</div>
</div>
</div>El Codigo CSS
Aqui esta el estilo:
Estilo de los botones a agregar
Lo primero será crear la parte que reproduce las columnas para poder posicionar los botones. Esto lo haremos en caso de que deseamos no depender de ninguna librería de estilo como Bootstrap.
html, body{
padding: 0;
margin:0;
}
body{
width:100%;
padding: 5px;
}
.row{
width:100%;
padding: 0 15px;
}
.row::after{
content: "";
clear: both;
display: table;
}
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
[class*="col-"]{
float:left;
}
@media only screen and (max-width: 1024px) and (min-width: 768px){
[class*="col-"]{
width: 33%;
}
}
@media only screen and (max-width:768px){
[class*="col-"]{
width:50%;
}
}
a{
text-decoration:none;
}
Después de esto iremos a proceder incluir el estilo que le da forma a los botones de funciones. En el grupo habrá uno con una lijera diferencia para reflejar la posibilidad de que cada botón puede tener su propio diseño, y de como podría funcionar los botones con otras diseños.
.card, .card01{
padding: 10px 0;
max-width:90%;
text-align: center;
margin-bottom: 20px;
}
.card > a{
text-decoration:none;
color: black;
}
.card > a i{
font-size: 80px;
color: gray;
border: 2px solid rgba(0, 0, 0, .2);
padding: 25px;
border-radius: 50%;
width:inherit;
}
.card > a i:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
}
.card > a i:active{
box-shadow: 0 4px 8px 0 rgba(68, 91, 189, 0.4), 0 6px 20px 0 rgba(68, 91, 189, 0.4);
}
.card01{
background: lightgray;
height: 300px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.card01 .imgas{
width:100%;
}
.card01 i{
font-size: 80px;
color: gray;
position: relaitve;
border-radius: 50%;
background-color: darkgrey;
margin: 1px auto;
padding: 25px;
}
.card01 .container{
bottom: 0;
margin-top:38px;
padding: 1px 16px;
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
color: white;
}
.card01:hover{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}El Resultado final con los botones
Este es el resultado de ejemplo sobre como crear botones de funciones en html. Espero les haya gustado y si tienen alguna idea sobre que podría hacer en el futuro, no duden en hacérmelo saber. Gracias y disfruten del dia.
