Tutoriales sobre Blogger

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:

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

Comentarios (5)

Abed Saragih17 de julio de 2013, 9:01
Tutorialnya ada tools untuk translate bahasanya mas.
ResponderEliminar
Respuestas
Unknown15 de agosto de 2013, 0:19
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
Respuestas
Fernando Salas16 de agosto de 2013, 17:03
@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
Respuestas
Nico Oaks20 de agosto de 2013, 20:16
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
Respuestas
Fernando Salas22 de agosto de 2013, 15:20
@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
Respuestas

Añadir comentario

Emoticon Cargar Imagenn Reglas Editar Comentarios

:))

:((

:-)

;)

=))

=.=

^_^

/=he

/=r

/=l

/=ok

/=clap

(y)

(yy)

/=hi

/=j

/=hup

/=hd

/=hl

/=hr

/=s

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

Botones de demotracion y descarga animados con CSS