¿ Tienes un blog y necesitas agregar botones y no sabes como hacerlo ? En éste tutorial te voy a enseñar paso a paso a agregar botones de estilo profesional en distintos colores, como los botones que ves más abajo:
Botones para Blogger
Pegar arriba de:]]></b:skin>
/*====================
BOTONES / BOTON *
=================== */
.btn{
border:none;
cursor:pointer;
color:#fff;
display:inline-block;
padding: 4px 60px;/*margen interno*/
border-radius:4px;/*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.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;
}
.btn:visited, .btn:hover{
color:#fff;
}
.btn:hover {
background-position: 100% 0;
moz-trasition: 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, #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, #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;}
Debajo de <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
COLOCAR BOTON EN UNA ENTRADA EN "VISTA HTML
COLORES:
<a href="#" class="btn color-verde">
Boton verde
</a>
<a href="#" class="btn color-azul">
Boton azul
</a>
<a href="#" class="btn color-amarillo">
Boton amarillo
</a>
<a href="#" class="btn color-verde">
Boton verde
</a>
<a href="#" class="btn color-naranja">
Boton naranja
</a>
<a href="#" class="btn color-claro">
Boton claro
</a>
<a href="#" claas="btn color-oscuro">
Boton oscuro
</a>
Se puede sustituir texto de"boton azul por "Coprar en Amazo" o "Comprar"
Para centrar el botón en la entrada copiar éste código arriba.
<div class="centrar">
</--aquí el boton-->
>/div>
Queda así:
<div class"centrar">
<a href="#" class="btn color-verde">
Sígueme en Instagram</a>
</div>
Mejor opción:
<div class="centrar">
<a class="btn color-amarillo" href="#">
Suscríbete a mi canal
</a>
</div>
No hay comentarios:
Publicar un comentario