Botones para Blogger con iconos y degradado

Cuando se tiene un blog siempre necesitamos llamar la atención de nuestros lectores y una de las formas es agregando botones que hagan alguna acción, ya sea: descargar, suscripción, comprar, etc. Es por eso que quiero compartir contigo 6 botones para blogger que puedes instalar y personalizar.

¡Hola! soy Gabriela de peengler.com.  Anteriormente había publicado sobre: Botón de descargar con efecto al pasar el cursor. Y ahora, puedes usar cualquiera de los siguientes 6 botones para lo que tú quieras.

Sin más que decir, ¡empecemos!

botones para blogger

Clic en la imagen para ver el vídeo ↑ en YouTube

Cómo poner botones para Blogger paso a paso

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:


/* ====================
	* 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;}

Instalar Font Awesome 5 en Blogger

Para que puedas añadir iconos a tus botones, instalaremos Font Awesome la versión 5 agregando la siguiente línea debajo de <head> (Lo encuentras al comienzo del código de tu plantilla)


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>

Ahora guardas los cambios.

Agrega botones para Blogger en una entrada/página de tu blog

botones blogger

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». Ver tutorial

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>

Cualquier duda mira el vídeo tutorial: ver tutorial

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>

Cualquier duda mira el vídeo tutorial: ver tutorial

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"