Mil Trucos Blogger

Botones de descarga estilo “Flat Design”

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Muchos blogueros tienen sitios descarga y es por ello que hoy vamos a compartir geniales botones de descarga al estilo Flat Design.

El diseño Flat es un estilo que se empezó a utilizar a partir del rediseño de la interfaz de Microsoft. Este tipo de diseño se caracteriza por dejar a un lado todo tipo de sombras, relieves, texturas y degradados. Es reconocido como el diseño auténticamente digital.

Botones de descarga estilo “Flat Design”..

botones-de-descarga-flat-design

Para agregar el primer estilo de botones que se muestra en la imagen (los más grandes), ve a Plantilla, Editar HTML y antes de ]]></b:skin> agrega lo siguiente:

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Ahora en la edición html de una entrada o página (este paso lo debes repetir cada vez que quieras usar los botones) pega lo siguiente:

<div style="text-align: center;">
 <ul class="button2">
 <li><a class="demo" href="URL ENLACE" target="_blank">Demo Link</a></li>
 <li><a class="download" href="URL ENLACE" target="_blank">Download Link</a></li>
 </ul>
</div>
<div class="clear"></div>

Los valores resaltados en azul son los que se pueden editar.

Ahora para agregar el segundo estilo (los botones más pequeños) agrega antes de ]]></b:skin> lo siguiente:

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Ahora en la edición html de una entrada o página (este paso lo debes repetir cada vez que quieras usar los botones) pega lo siguiente:

<div style="text-align: center;">
 <ul class="button">
 <li><a class="demo" href="URL ENLACE" target="_blank">Demo</a></li>
 <li><a class="download" href="URL ENLACE" target="_blank">Download</a></li>
 </ul>
</div>
<div class="clear"></div>

Los valores resaltados en azul son los que se pueden editar.

Si el truco te ha gustado no olvides compartirlo en tus redes sociales.

Vía/Arlina

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

! Comentario

  1. agosto 9, 2016    

    Muchas gracias lo necesitaba para un blog que tengo, saludos amigo excelente trabajo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo