Botão com formato Balão para Redes Sociais com Css3
Postado: 20 de agosto de 2021
Neste Artigo veja como criar um simples Botão com formato Balão para Redes Sociais com Css3.
Vamos Adicionar o Html:
<ul class="btn-balao-social">
<li class="twitter"><a href="#" title="Twitter"><i class="icon icon-twitter"></i></a></li>
<li class="facebook"><a href="#" title="Facebook"><i class="icon icon-facebook"></i></a></li>
<li class="instagram"><a href="#" title="Instagram"><i class="icon icon-instagram"></i></a></li>
<li class="youtube"><a href="#" title="Youtube"><i class="icon icon-youtube"></i></a></li>
<li class="linkedin"><a href="#" title="Linkedin"><i class="icon icon-linkedin"></i></a></li>
<li class="pinterest"><a href="#" title="Pinterest"><i class="icon icon-pinterest"></i></a></li>
<li class="whatsapp"><a href="#" title="Whatsapp"><i class="icon icon-whatsapp"></i></a></li>
</ul>
Vamos Adicionar o Css:
.btn-balao-social { float:left; width:100%; padding: 1em 0em; }
.btn-balao-social ul { list-style:none; }
.btn-balao-social li {
position: relative;
display:inline-flex;
top:0;
left:0;
width:50px;
height:50px;
float:left;
margin-right:10px;
text-align:center;
background:transparent;
transition:.5s;
}
.btn-balao-social li a {
position: absolute;
width:50px;
height:50px;
line-height:60px;
display: inline-block;
text-align:center;
text-decoration:none;
font-size:1.3em;
color:#fff;
}
.btn-balao-social li:before {
content:'';
position: absolute;
width:100%;
height:100%;
transform: rotate(45deg);
border-radius:100px 100px 0px 100px;
transition: .3s;
}
.btn-balao-social li.facebook:before { background:#3b5998; }
.btn-balao-social li.facebook:hover:before { background:#414141; }
.btn-balao-social li.twitter:before { background:#00aced; }
.btn-balao-social li.twitter:hover:before { background:#414141; }
.btn-balao-social li.instagram:before { background:#ee4b61; }
.btn-balao-social li.instagram:hover:before { background:#414141; }
.btn-balao-social li.youtube:before { background:#d72326; }
.btn-balao-social li.youtube:hover:before { background:#414141; }
.btn-balao-social li.linkedin:before { background:#0077b7; }
.btn-balao-social li.linkedin:hover:before { background:#414141; }
.btn-balao-social li.pinterest:before { background:#cc2127; }
.btn-balao-social li.pinterest:hover:before { background:#414141; }
.btn-balao-social li.whatsapp:before { background:#25d366; }
.btn-balao-social li.whatsapp:hover:before { background:#414141; }
Veja o Código Funcionando!
Baixar Código
Veja Funcionando
Publicado por: loopnerd
1.458 Visualizações
Deixe um comentário