Só 72 Bundas
Só 72 Bundas
(+18)
AS BARATINHAS #39
AS BARATINHAS #39...
...Conteúdo (+18)
superentretenimento
Cabeça, ombro,
joelho e pernas
Buião
37 decotes que vão deixar a
sua semana melhor



Botão DEMO e DOWNLOAD Com CSS Para Blogger


Gosto de ensinar tutoriais da qual as pessoas realmente precisam em seu site mais não sabem como fazer, como por exemplo este tutorial que trago para vocês - Botão DEMO e DOWNLOAD Com CSS. Principalmente para aqueles blogs de template. 




Veja uma demonstração:




Para colocar no blogger...


Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:


Para colocar no Blogger

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:
<style>
.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover { 
background: #454242;
text-decoration:none 
}

.download:hover { 
background: #454242;
text-decoration:none 
}

.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f06e"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
} 
</style>
<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="LINK DA DEMONSTRAÇÃO" target="_blank">Demo</a></li>
<li><a class="download" href="LINK DO DOWNLOAD" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Tendo colado o código, salve e pronto!!!

Botão DEMO e DOWNLOAD Com CSS Para Blogger Botão DEMO e DOWNLOAD Com CSS Para Blogger Reviewed by Muca on 5/28/2014 09:11:00 PM Rating: 5

Baixe o seu e-book com mais de 1,200 mágicas para fazer com seus amigos | "Download"