"Botão APOIA.se"
Bootstrap 3.3.0 Snippet by juliovelosojr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Botão para sites do APOIA.se</h2>
<div class='apoia-button'>
<a href='LINK_DA_CAMPANHA' target='_blank' class='apoia-link'>Apoie o site no <img class='apoia-img' src='http://i.imgur.com/7Gsn761.png'/></a>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* CONFIGURE O TAMANHO DO BOTÃO ALTERANDO OS # */
.apoia-button {
float:left
width: 160px; /* # */
}
a.apoia-link {
padding:2px 6px 3px 6.5px; /* # */
color: #fff;
font-size: 11px; /* # */
background: #eb4a3b;
border-radius: 3px; /* # */
-webkit-transition: width 2s; /* Safari */
transition: background 2s;
}
a.apoia-link:hover {
background:rgba(235,74,59,0.8);
text-decoration:none;
}
img.apoia-img {
height: 9px; /* # */
position: relative;
top: -1px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: