- Página Inicial
- Códigos CSS Prontos
- Botões de Redes Sociais Efeito Css Giro 360
- Voltar
Botões de Redes Sociais Efeito Css Giro 360

Neste artigo vamos criar Botões de Redes Sociais com efeito Giro 360 estilizado com Css3. ao passar o mouse sobre o elemento html as animações inicia conforme programado e estilizado nos Códigos Css de cada Botão.
Estrutura Base que vamos usar no projeto!
A estrutura base do nosso pequeno projeto para projetar o Botão vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags <ul>, <li>, <div>,<i> e a tag <a> para inserirmos o texto.
Essas tags que usaremos para criar os Botões de Redes Sociais
.
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos Botões.
Estrutura Código Html:
<ul class="box-social back-4"> <li> <a href="#"> <div class="icone-box-facebook rotacao"> <i class="fa fa-facebook" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-instagram rotacao"> <i class="fa fa-instagram" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-twitter rotacao"> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-youtube rotacao"> <i class="fa fa-youtube" aria-hidden="true"></i> </div> </a> </li> </ul>
Estrutura Código CSS
Para conseguirmos o efeito desejado nos Botões, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Insira o link dos ícones da font-awesome no head da sua página
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
Nesta seção, usaremos algumas propriedades CSS para estilizar os Botões Css com o efeito desejado.
.box-social { margin: auto; display: table; } .box-social li { float:left; text-align:center; margin: 5px; } .fa { font-size: 32px !important; margin-top: 23%; } .icone-box-facebook { width: 53px; height: 53px; background-color:#3b5998; color: #fff; } .icone-box-instagram { width: 53px; height: 53px; background:hsl(0 0% 10%); background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; } .icone-box-twitter { width: 53px; height: 53px; background-color:#00aced; color: #fff; } .icone-box-youtube { width: 53px; height: 53px; background-color:#dd4b39; color:#fff; } /* ROTACIONAR E BORDER-RADIUS */ .rotacao { -webkit-transition: 0.6s; transition: 0.6s; } li:hover .rotacao { border-radius: 50px; transform:rotateZ(360deg); } /* FIM ROTACIONAR R BORDER-RADIUS */
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Botões de Redes Sociais Efeito Css Giro 360
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como estilizar Botões de Redes Sociais.
existem diversas formas de estilizar Botões com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Publicado por: Loop Nerd
143 Visualizações
Deixe um comentário