Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

En este tutorial veremos como crear 2 botones animados con CSS, en mi caso daré dos ejemplos de demostración y descarga ustedes pueden elegir por lo que ustedes deceen.


Antes de comenzar veremos una demostración: 

Comencemos

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>> 
  • Paso 2: Buscamos la siguiente linea (Ctrol +F)
►<b:skin></b:skin>
  • Paso 3: Desplegamos el código dentro de ►<b:skin></b:skin> y buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 4: Justo encima de ]]></b:skin> pegamos el siguiente código CSS 
/** Botones demo y descarga Animados con CSS por Tutoriales-Blogger.info */
.animated-button { display: table; padding: 7px 15px 8px 15px; font-family: "open_sans_lightregular"; cursor: pointer; overflow: hidden; }
.animated-button:hover { opacity: 1; } .animated-button:active { color: white !important; background-color: #191919 !important; }
.animated-button .icon { float: left; margin-right: 10px; width: 32px; height: 32px; margin-top: 2px; }
.animated-button .content { float: right; }
.animated-button .title { font-family: "open_sans_semiboldregular" }
.animated-button .sub-title { font-size: 11px; color: #ffdeb9; }
/** Colors */
/* == Orange == */
.animated-button.orange .title
{
color: #9E5900;
text-shadow: 1px 1px 1px #f1ab5a;
}
.animated-button.orange .sub-title
{
color: #ffdeb9;
}
.animated-button.orange
{
border: 1px solid #d17118;
background: #ec801a; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#f69f28), color-stop(100%,#ec801a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f69f28 2%,#ec801a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec801a',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow:         0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}
.animated-button.orange:hover
{
background: #ed840b; /* Old browsers */
background: -moz-linear-gradient(top, #f4dab7 0%, #f69f28 3%, #ed840b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4dab7), color-stop(3%,#f69f28), color-stop(100%,#ed840b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4dab7 0%,#f69f28 3%,#ed840b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4dab7', endColorstr='#ed840b',GradientType=0 ); /* IE6-9 */
}
.animated-button.orange:active
{
-webkit-box-shadow: 0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow:         0px 2px 0px rgba(206, 109, 9, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
margin-top: 1px;
margin-bottom: -1px;
}
/* == Red == */
.animated-button.red .title
{
color: #87270d;
text-shadow: 1px 1px 1px #f58460;
}
.animated-button.red .sub-title
{
color: #ffac8f;
}
.animated-button.red
{
border: 1px solid #b92706;
background: #c93818; /* Old browsers */
background: -moz-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5a770), color-stop(4%,#e85a27), color-stop(100%,#c93818)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c93818 100%); /* IE10+ */
background: linear-gradient(to bottom, #e5a770 1%,#e85a27 4%,#c93818 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a770', endColorstr='#c93818',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow:         0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}
.animated-button.red:hover
{
background: #c13d22; /* Old browsers */
background: -moz-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c13d22 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5a770), color-stop(4%,#e85a27), color-stop(100%,#c13d22)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c13d22 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c13d22 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5a770 1%,#e85a27 4%,#c13d22 100%); /* IE10+ */
background: linear-gradient(to bottom, #e5a770 1%,#e85a27 4%,#c13d22 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5a770', endColorstr='#c13d22',GradientType=0 ); /* IE6-9 */
}
.animated-button.red:active
{
-webkit-box-shadow: 0px 2px 0px rgba(160, 47, 21, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 2px 0px rgba(160, 47, 21, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow:         0px 2px 0px rgba(160, 47, 21, 1), 0px 2px 5px rgba(0, 0, 0, 0.4);
margin-top: 1px;
margin-bottom: -1px;
}
/** Animations */
/* == Default Translate Animation */
.animated-button > .icon
{
-webkit-animation: icon_translate 3s infinite ease both;
-moz-animation: icon_translate 3s infinite ease both;
-ms-animation: icon_translate 3s infinite ease both;
-o-animation: icon_translate 3s infinite ease both;
animation: icon_translate 3s infinite ease both;
}
/* == Rotate Animation */
.animated-button.rotate:hover > .icon
{
-webkit-animation: zoom_rotate 0.6s ease-in-out;
-moz-animation: zoom_rotate 0.6s ease-in-out;
-ms-animation: zoom_rotate 0.6s ease-in-out;
-o-animation: zoom_rotate 0.6s ease-in-out;
animation: zoom_rotate 0.6s ease-in-out;
}
/* == Pulse Animation */
.animated-button.pulse:hover > .icon
{
-webkit-animation: pulse_animation 1s infinite ease-in-out;
-moz-animation: pulse_animation 1s infinite ease-in-out;
-ms-animation: pulse_animation 1s infinite ease-in-out;
-o-animation: pulse_animation 1s infinite ease-in-out;
animation: pulse_animation 1s infinite ease-in-out;
}
/* == Icon Translate Animation Keyframes */
@-webkit-keyframes icon_translate
{
 50% { -webkit-transform: translate(0, 5px); }
 100% { -webkit-transform: translate(0, 0); }
}
@-moz-keyframes icon_translate {
 50% { -moz-transform: translate(0, 5px); }
 100% { -moz-transform: translate(0, 0); }
}
@-o-keyframes icon_translate {
  50% { -o-transform: translate(0, 5px); }
 100% { -o-transform: translate(0, 0); }
}
@-ms-keyframes icon_translate {
  50% { -ms-transform: translate(0, 5px); }
 100% { -ms-transform: translate(0, 0); }
}
@keyframes icon_translate {
 50% { transform: translate(0, 5px); }
 100% { transform: translate(0, 0); }
}
/* == Zoom Rotate Animation Keyframes */
@-webkit-keyframes zoom_rotate
{
 50% { -webkit-transform: rotate(360deg) scale(20); opacity: 0; }
}
@-moz-keyframes zoom_rotate
{
 50% { -moz-transform: rotate(360deg) scale(20); opacity: 0; }
}
@-o-keyframes zoom_rotate
{
  50% { -o-transform: rotate(360deg) scale(20); opacity: 0; }
}
@-ms-keyframes zoom_rotate
{
  50% { -ms-transform: rotate(360deg) scale(20); opacity: 0; }
}
@keyframes zoom_rotate
{
 50% { transform: rotate(360deg) scale(20); opacity: 0; }
}
/* == Pulse Animation Keyframes */
@-webkit-keyframes pulse_animation
{
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse_animation
{
0% { -moz-transform: scale(1); }
30% { -moz-transform: scale(1); }
40% { -moz-transform: scale(1.08); }
50% { -moz-transform: scale(1); }
60% { -moz-transform: scale(1); }
70% { -moz-transform: scale(1.05); }
80% { -moz-transform: scale(1); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse_animation
{
0% { -o-transform: scale(1); }
30% { -o-transform: scale(1); }
40% { -o-transform: scale(1.08); }
50% { -o-transform: scale(1); }
60% { -o-transform: scale(1); }
70% { -o-transform: scale(1.05); }
80% { -o-transform: scale(1); }
100% { -o-transform: scale(1); }
}
@-ms-keyframes pulse_animation
{
0% { -ms-transform: scale(1); }
30% { -ms-transform: scale(1); }
40% { -ms-transform: scale(1.08); }
50% { -ms-transform: scale(1); }
60% { -ms-transform: scale(1); }
70% { -ms-transform: scale(1.05); }
80% { -ms-transform: scale(1); }
100% { -ms-transform: scale(1); }
}
@keyframes pulse_animation
{
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
/** Botones demo y descarga Animados con CSS por Tutoriales-Blogger.info */
  • Paso 5: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos los botones en una entrada 

  • Paso 6: Dentro de una entrada pegamos el siguiente codigo HTML
<div id="content">
<ul id="buttons">
<li>
    <span class="animated-button orange rotate"><a href="http://url%20dowload/" target="_blank">
     </a><div class="icon" style="background-image: url(https://cdn1.iconfinder.com/data/icons/Hand_Drawn_Web_Icon_Set/32/folder_download.png);">
</div>
<div class="content">
<div class="title">
<a href="http://url%20descargar/" target="_blank">Descargar .zip</a></div>
<div class="sub-title">
Descarga directa ,No virus,</div>
</div>
</span>
   </li>
<li>
    <span class="animated-button red pulse"><a href="http://url%20demotracion/" target="_blank">
     </a><div class="icon" style="background-image: url(https://cdn1.iconfinder.com/data/icons/Hand_Drawn_Web_Icon_Set/32/folder_search.png);">
</div>
<div class="content">
<div class="title">
<a href="http://url%20demotracion/" target="_blank">Demo</a></div>
<div class="sub-title">
Demostración en Vivo</div>
</div>
</span>
   </li>
</ul>
</div>
</div>
Listo ya estariamos disfrutando de nuestros botones animados con CSS, recuerda que tu puedes configurarlos de la siguiente manera  
Nota:-  Cambia lo que esta en Rojo por el texto que desees 
Nota:-  También puedes cambiar la URL Rojo de la imagen por la que mas te guste
Nota:-  Cambia la URL del Botón Rojo por tu enlace 


DEMO
- - 5 Comentarios
Tag

Comentarios (5)

  1. Tutorialnya ada tools untuk translate bahasanya mas.

    ResponderEliminar
  2. Oie, podrias hacerlo mas practico amigo?? osea con un codigo mas simple.. pero el diseño y todo me encanto de este boton... seria mas lindo si le das bordes redondeados y le pones una imagen noise de fondo :D jaja solo digo eh... pero me agradaria q lo actualices... se ve algo beta..

    ResponderEliminar
  3. @Andres Aguilar La verdad que tienes razón, pero realmente lo hago beta como tu dices por la razón que todos tienen diferentes gustos, algunos prefieren con bordes redondeados como has dicho o con efectos relover o con sobras y demás ejemplos que estoy pasando por alto, para ello esta la caja de comentarios para explicar o agregar información a los tutoriales

    Espero que me sepas entender y un saludo

    ResponderEliminar
  4. Es lo que he estado buscando por mucho tiempo, la verdad me encantó, aunque me gustaría uno más sencillo. Pero no importa lo trataré de implementar en mi blog. Se me pasó pedirte en mi otro comentario, ¿no podrías hacer un tuto sobre "botones spoiler" con algún efecto css? Gracias.

    ResponderEliminar
  5. @Nicholas Oaks Gracias a ti por tu comentario en la sección "Otro Tema" y respondiendo tu comentario aquí te comento que estaré estos días tratando de crear esos tutos que me has pedido.

    Espero que sepas esperarme

    Una ves mas gracias por tu comentario

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar