.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Botones estilo “Flat Design”

27 nov 2019
Botones de descarga y demo.
Estos botones son muy útiles si en tu blog sueles poner descarga de documentos.
Para agregarlos nos tenemos que ir a
Tema > Editar HTM
Buscamos ]]></b:skin> y justo antes pegamos este código






ver código 
- Copia este código.

.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 cada vez que vallas a usar los botones añades este código a tu entrada

ver código 
- Copia este código.

<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>



Cambiamos lo marcado en azul por el url del enlace

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos