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

/* 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; }