En este tututorial te dejare unos botones animados para que los puedas utilizar para redirigir a una pagina ya sea de demostracion o de descarga de un archivo.Tiene cada uno forma particular de accion y de distintos colores ,el agradable efecto se activa cuando al poner el cursor del mouse sobre los mismos.Este fue creado utilizando codigos de estilo CSS y son sencillos de utilizar en tu blog de blogger.
Ejemplos:
BotonUno BotonDos BotonTres BotonCuatro
Pasos para añadirlos a tu blog de blogger.
1.Entra a tu cuenta de blogger
2.Selecciona Plantilla >>Editar Html y busca la siguiente etiqueta ]]</b:skin>
3.Copia y pega el codigo de abajo antes de la etiqueta ]]</b:skin>
.btn:link, .btn:visited {
width: 180px;
text-decoration: none;
height: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
color: white;
line-height: 40px;
font-size: 20px;
font-family: arial, sans-serif;
margin: 20px;
float: left;
display: block;
border: solid 2px rgba(0,0,0,0.2);
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
}
.uno:link, .uno:visited {
background: #b85a35;
background: -webkit-linear-gradient(#b85a35, #e6aa93);
background: -moz-linear-gradient(#b85a35, #e6aa93);
background: -o-linear-gradient(#b85a35, #e6aa93);
background: -ms-linear-gradient(#b85a35, #e6aa93);
background: linear-gradient(#b85a35, #e6aa93);
-webkit-background-size: 100% 200%;
-moz-background-size: 100% 200%;
background-size: 100% 200%;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
-ms-transition: all .3s linear;
transition: all .3s linear;
}
.uno:hover, .uno:focus, .uno:active {
background-position: 0 -15px;
}
.dos:link, .dos:visited {
background: #2876b2;
background: -webkit-linear-gradient(#2876b2, #549ad0);
background: -moz-linear-gradient(#2876b2, #549ad0);
background: -o-linear-gradient(#2876b2, #549ad0);
background: -ms-linear-gradient(#2876b2, #549ad0);
background: linear-gradient(#2876b2, #549ad0);
background-repeat: repeat;
-webkit-background-size: 100% 200%;
-moz-background-size: 100% 200%;
background-size: 100% 200%;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-ms-transition: all .5s linear;
transition: all .5s linear;
}
.dos:hover, .dos:focus, .dos:active {
background-position: 0 -102%;
}
.tres:link, .tres:visited {
background: #31a758;
background: -webkit-radial-gradient(#31a758, #95e4af);
background: -moz-radial-gradient(#31a758, #95e4af);
background: -o-radial-gradient(#31a758, #95e4af);
background: -ms-radial-gradient(#31a758, #95e4af);
background: radial-gradient(#31a758, #95e4af);
-webkit-background-size: 100% 10%;
-moz-background-size: 100% 10%;
background-size: 100% 10%;
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
-o-transition: all .7s linear;
-ms-transition: all .7s linear;
transition: all .7s linear;
}
.tres:hover, .tres:focus, .tres:active {
background-position: 0 0;
-webkit-background-size: 80% 100%;
-moz-background-size: 80% 100%;
background-size: 80% 100%;
}
.cuatro:link, .cuatro:visited {
background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background-position: center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
transition: all .4s linear;
}
.cuatro:hover, .cuatro:focus, .cuatro:active {
-webkit-background-size: 100% 200%;
-moz-background-size: 100% 200%;
background-size: 100% 200%;
}
4.Guarda Plantilla
5. Cuando vayas a utilizar estos botones en el editor html de la entrada escribiras el siguiente codigo de acuerdo al boton seleccionado.
<a href="#" class="btn uno" onclick="return false;">Descarga Ahora</a>
<a href="#" class="btn dos" onclick="return false;">Somete Formulario</a>
<a href="#" class="btn tres" onclick="return false;">Entra Ahora</a>
<a href="#" class="btn cuatro" onclick="return false;">Entra Concurso</a>
<a href="#" class="btn dos" onclick="return false;">Somete Formulario</a>
<a href="#" class="btn tres" onclick="return false;">Entra Ahora</a>
<a href="#" class="btn cuatro" onclick="return false;">Entra Concurso</a>
Nota:Cambia el texto en color brown por el texto que desees y para redirigir reemplaza simbolo # por la direccion donde enviaras a los visitante.
0 comentarios:
Publicar un comentario