Botão com formato Balão para Redes Sociais com Css3

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