Botão de Compartilhamento de redes sociais Html Css
On hover css – Botão 3D
Botão de Compartilhamento de redes sociais Html Css
Neste artigo veremos como criar Botões de Redes Sociais com Html e Css.
Para isso precisamos do HTML, CSS e Javascript.
Nesta seção, projetaremos uma estrutura simples na tag <div>. temos dentro da tag <div> a tag <ol>, <li> e dentro da tag li temos a tag <href> para inserir o link da rede social desejada.
Vamos Adicionar o HTML
<div class="btn-share"> <ol> <li><a href="#" title="Facebook"><i class="icon icon-facebook"></i></a></li> <li><a href="#" title="Instagram"><i class="icon icon-instagram"></i></a></li> <li><a href="#" title="Whatsapp"><i class="icon icon-whatsapp"></i></a></li> <li><a href="#" title="Twitter"><i class="icon icon-twitter"></i></a></li> </ol> <div class="toggle"></div> </div>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para projetar o nosso botão de Redes Sociais.
.toggle{ width: 55px; height: 55px; background-color: #008FE6; color: #ffffff; border-radius: 50%; cursor: pointer; position: relative; overflow: hidden; } .toggle::before{ content: '\e159'; width: 100%; height: 100%; position: absolute; color: white; font-family: 'untitled-font-1'; text-align: center; line-height: 55px; font-size: 20px; transition:0.5s; } .btn-share.ativo .toggle::before{ background-color:#373939; color: #ffffff; transition:0.5s; } .btn-share{ margin:auto; width:50px; height:50px; } .btn-share ol{ position: absolute; margin: 2px; width: 50px; height: 50px; } .btn-share ol li{ position: absolute; width: 50px; height: 50px; line-height: 55px; background: #FAFAFA; display: block; border-radius: 50%; transition: all .5s; text-align: center; } .btn-share ol li a{ font-size:1.3em; text-decoration:none; color:#fff; } .btn-share.ativo ol li{ transform: translate(0); transition: all 0.4s; } .btn-share.ativo ol li:nth-child(1){ transition-delay: 0.4s; transform: translateX(-60px); background-color:#3b5998; } .btn-share.ativo ol li:nth-child(2){ transition-delay: 0.3s; transform: translateX(-120px); /*Degradê do Instagram*/ background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); } .btn-share.ativo ol li:nth-child(3){ transition-delay: 0.2s; transform: translateX(-180px); background-color:#34af23; } .btn-share.ativo ol li:nth-child(4){ transition-delay: 0.1s; transform: translateX(-240px); background-color:#00acee; }
Vamos adicionar o script
<script src="js/jquery.js"></script> <script> const toggle = document.querySelector('.toggle'); toggle.addEventListener('click',()=>{ const share_btn = document.querySelector('.btn-share'); share_btn.classList.toggle('ativo'); }) </script>
Combinando as três seções acima Html, Css e o Script temos o seguinte Resultado !
Botão de Compartilhamento de redes sociais Html Css
Veja o Resultado !
Deixe um comentário