Halloween party ideas 2015

Três modelos de botão em CSS e HTML para você poder colocar em seus posts, para o usuário poder fazer download, visualizar e comprar algum produto que você disponibiliza em seu site/blog. Você pode editar os modelos ao seu gosto e de acordo com sua necessidade.

O primeiro passo é usar a font awesome, caso você use um tema (template) que não tenha o recurso instalado em seu código fonte, será necessário inseri-lo, mas, o processo é simples.

Abaixo de <head> você vai colocar o codigo:

[<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>]

Feito isso, abaixo de ]]></b:skin> cole este código:

[<style id='button-css' type='text/css'>a.button,a.button span{line-height:1em}.post-related-item .item-title a{color:#fff}.locked-content{position:relative;padding:15px;z-index:9}.locked-content .fb_iframe_widget iframe{max-width:none!important;z-index:2}.locked-content .overlay{position:absolute;width:100%;height:100%;opacity:.1;z-index:0}.locked-content .inner{position:relative}.locked-content i.fa{font-size:60px;padding:30px 0 0}h2.locked-content-title{margin:10px 0;font-size:20px}h3.locked-content-sub-title{font-size:16px;margin:10px 0}.locked-content-actions{position:relative;z-index:1}.locked-content-action{display:inline-block;vertical-align:top;padding:10px 5px 20px}.locked-content-action .fb_iframe_widget{display:block;margin:-1px 0 0}.contact-form-email,.contact-form-email-message,.contact-form-name{max-width:100%;margin:0 0 10px}.contact-form-button{font-size:16px;font-weight:100;height:auto;padding:10px 50px}a.button{display:inline-block;padding:.5em .7em .7em;background:#fff;position:relative;-o-border-radius:4px;-ms-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}a.button span.button-overlay{display:block;position:absolute;width:100%;height:100%;top:0;left:0;box-sizing:border-box;-o-border-radius:4px;-ms-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #000;border-bottom-width:.2em;opacity:.2;filter:alpha(opacity=20)}a.button:hover .button-overlay{background:#fff;opacity:.15;filter:alpha(opacity=15)}a.button:active .button-overlay{border-bottom-width:1px}span.dropcap,span.firstcharacter{display:block;float:left;font-size:5em;line-height:1em;margin:0 .2em 0 0}.</style>]

Para finalizar, dentro do post você deve colocar o seguinte código:

[<div style="text-align: center;"><a class="button" href="URL AQUI" style="background-color: #6aa84f; font-size: 24px;" target="_blank"><span style="background-color: #6aa84f; color: white; font-size: x-large;">Preview <i class="fa fa-eye"></i></span><span class="button-overlay"></span><span class="button-overlay"></span></a>&nbsp; &nbsp;&nbsp;<a class="button" href="URL AQUI" style="background-color: #149bd1; font-size: 24px;" target="_blank"><span style="background-color: #149bd1; color: white; font-size: x-large;">Comprar <i class="fa fa-money"></i></span><span class="button-overlay"></span><span class="button-overlay"></span><span class="button-overlay"></span><span class="button-overlay"></span></a>&nbsp; &nbsp;&nbsp;<a class="button" href="URL AQUI" style="background-color: #990000; font-size: 24px;" target="_blank"><span style="background-color: #990000; color: white; font-size: x-large;">Download <i class="fa fa-download"></i></span><span class="button-overlay"></span><span class="button-overlay"></span></a></div>]

Para personalizar basta trocar:
    • Download, Comprar, Preview, pelo o que desejar.
    • Mude o icone 'fa fa-eye' , por aquele que deseja utilizar neste site:Font Awesome Icons.
    • Para mudar a cor e a fonte altere aqui: background-color: #6aa84f; font-size: 24px;" - *
      *OBS: background-color: #6aa84f, deve ser alterado nos dois lugares para o botão não ficar com duas cores ou o resultado final não será legal.

      Postar um comentário

      Robson Andrade Frias

      {picture#https://lh3.googleusercontent.com/-yov9xaIO0dI/AAAAAAAAAAI/AAAAAAAAMwo/vkeh27JsP28/s60-p-rw-no/photo.jpg} CultSpot Magazine Digital {facebook#https://pt-br.facebook.com/cultspot/} {twitter#https://twitter.com/cult_spot} {google#https://plus.google.com/+CultspotNetrededeculturaL} {pinterest#https://www.pinterest.com/cultspot/} {youtube#https://www.youtube.com/channel/UC2K8LUOEYRUutwTS3Iom2VA} {instagram#https://www.instagram.com/cultspot/}
      Tecnologia do Blogger.