Primero que nada, debes instalar los estilos para que se vean bonitos los botones para Blogger. Y para eso debes dirigirte a Tema > Editar Html > Luego CTRL + F y busca: ]]></b:skin> y arriba de esa línea pegas lo siguiente justo encima.
Código
/* ==================== * BOTONES / BOTON *==================== */.btn{ border: none; cursor: pointer; color: #fff; display: inline-block; padding: 16px 22px; /*margen interno*/ border-radius: 6px; /*borde redondeado*/ text-align: center; line-height: 22px; font-family: "Roboto", sans-serif; font-size: 18px; /*tamaño de las letras*/ overflow: hidden; margin-left: 15px; box-shadow: 0px 6px 18px -5px rgba(0, 0, 0, 0.5); background-size: 300% 100%; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.btn:visited, .btn:hover{ color: #fff;
}.btn:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.btn i{ color: #fff; font-size: 16px}
/*Verde*/.btn.color-verde { background-image: linear-gradient(to right, #137f4c, #2bb673, #2bb673, #137f4c);}/*Azul*/.btn.color-azul { background-image: linear-gradient(to right, #0377a8, #4481eb, #4481eb, #0377a8);}/*Rojo*/.btn.color-rojo { background-image: linear-gradient(to right, #eb3941, #f15e64, #f15e64, #eb3941);}/*Amarillo*/.btn.color-amarillo { background-image: linear-gradient(to right, #e48803, #e4ae2d, #e4ae2d, #e48803);}/*Oscuro*/.btn.color-oscuro { background-image: linear-gradient(to right, #29323c, #485563, #485563, #29323c);}/*Claro*/.btn.color-claro { background-image: linear-gradient(to right, #ccc, #e8e8e8, #e8e8e8, #ccc); color: #000}
.btn.color-claro i {color: #000}.centrar{text-align: center;}a{text-decoration: none;}
/* ====================
* BOTONES / BOTON *
==================== */
.btn{
border: none;
cursor: pointer;
color: #fff;
display: inline-block;
padding: 16px 22px; /*margen interno*/
border-radius: 6px; /*borde redondeado*/
text-align: center;
line-height: 22px;
font-family: "Roboto", sans-serif;
font-size: 18px; /*tamaño de las letras*/
overflow: hidden;
margin-left: 15px;
box-shadow: 0px 6px 18px -5px rgba(0, 0, 0, 0.5);
background-size: 300% 100%;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn:visited, .btn:hover{
color: #fff;
}
.btn:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn i{
color: #fff;
font-size: 16px
}
/*Verde*/
.btn.color-verde {
background-image: linear-gradient(to right, #137f4c, #2bb673, #2bb673, #137f4c);
}
/*Azul*/
.btn.color-azul {
background-image: linear-gradient(to right, #0377a8, #4481eb, #4481eb, #0377a8);
}
/*Rojo*/
.btn.color-rojo {
background-image: linear-gradient(to right, #eb3941, #f15e64, #f15e64, #eb3941);
}
/*Amarillo*/
.btn.color-amarillo {
background-image: linear-gradient(to right, #e48803, #e4ae2d, #e4ae2d, #e48803);
}
/*Oscuro*/
.btn.color-oscuro {
background-image: linear-gradient(to right, #29323c, #485563, #485563, #29323c);
}
/*Claro*/
.btn.color-claro {
background-image: linear-gradient(to right, #ccc, #e8e8e8, #e8e8e8, #ccc);
color: #000
}
.btn.color-claro i {color: #000}
.centrar{text-align: center;}
a{text-decoration: none;}
Para realizar este funcion tenemos que añadir Font Awesome la versión 5.
Nos vamos a Tema > Editar HTMl y con CTRL + F busca <Head> y justo encima añadimos el siguiente código.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
Guardamos los cambios
Para mostrar los botones en tu entrada o página, solo debes crear un enlace y agregarle la clase dependiendo del botón. Ejemplo:
Botón verde
<a href="#" class="btn color-verde">
Boton verde
</a>
Botón Azul
<a href="#" class="btn color-azul">
Boton azul
</a>
Botón Rojo
<a href="#" class="btn color-rojo">
Boton rojo
</a>
Botón Amarillo
<a href="#" class="btn color-amarillo">
Boton amarillo
</a>
Botón Oscuro
<a href="#" class="btn color-oscuro">
Boton oscuro
</a>
Botón Claro
<a href="#" class="btn color-claro">
Boton claro
</a>
Nota: Recuerda agregar tu enlace dentro del href=»aqui-tu-enlace».
Centrar Botón en una entrada de Blogger
Para centrar tu botón, solo debes agregar un bloque y le agregas la clase centrar y dentro del bloque colocas tu botón. Ejemplo:
<div class="centrar">
<!-- aqui el boton -->
</div>
Agregar icono a un botón de Blogger
Anteriormente hemos instalado Font Awesome 5 “versión gratuita” por lo que puedes agregar cualquier icono dentro del botón. Ir a Font Awesome.
Por ejemplo:
<a href="#" class="btn color-verde">
Boton verde
<i class="fas fa-download"></i>
</a>
No hay comentarios:
Publicar un comentario
En breve les contestaremos