Botões Redondos para Redes Sociais
Postado: 19 de setembro de 2021
Tempo de Leitura: < 1 Minuto
Neste artigo veja como fazer Botões Redondos para Redes Sociais com efeito hover animado com css.
Vamos adicionar o Html:
<ul class="btn_social"> <li><a href="#" target="_blank" title="facebook"><i class="icon icon-facebook"></i></a></li> <li><a href="#" target="_blank" title="twitter"><i class="icon icon-twitter"></i></a></li> <li><a href="#" target="_blank" title="instagram"><i class="icon icon-instagram"></i></a></li> <li><a href="#" target="_blank" title="Pinterest"><i class="icon icon-pinterest"></i></a></li> </ul>
Vamos Adicionar o Css:
.btn_social { margin:auto; text-align:center; } .btn_social li { width: 60px; height: 60px; line-height: 65px; position: relative; background: #911F27; list-style: none; float: none; margin: 10px; z-index: 1; border-radius: 50%; font-size: 1.4em; text-align: center; transition: .4s ease-in-out; display: inline-block; } .btn_social li a { display: block; text-decoration:none; color:#fff; transition:.3s ease-in-out; } .btn_social li:before { position:absolute; content:''; width:100%; height:100%; top:0; left:0; background: #f4e3ac; border-radius:50%; z-index:-1; transform: scale(0); transition:.3s ease-in-out; } .btn_social li:hover:before { transform: scale(0.9); } .btn_social li a:hover { color:#911F27; }
Veja o Resultado !
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
609 Visualizações
Deixe um comentário