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

Neste artigo vamos criar Botões de Redes Sociais Efeito Flutuante estilizado com Css. 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 sombra-base"> <i class="fa fa-facebook" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-instagram sombra-base"> <i class="fa fa-instagram" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-twitter sombra-base"> <i class="fa fa-twitter" aria-hidden="true"></i> </div> </a> </li> <li> <a href="#"> <div class="icone-box-youtube sombra-base"> <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; } /* SOMBRA BASE */ .sombra-base { display: inline-block; position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: transparent; transform: translateZ(0); box-shadow: 0 0 1px transparent; border-radius: 50px; } .sombra-base:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); transition-duration: 0.3s; transition-property: transform opacity; } .sombra-base:hover { transform: translateY(-6px); } .sombra-base:hover:before { opacity: 1; transform: translateY(6px); } /* FIM SOMBRA BASE */
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Botões de Redes Sociais Efeito Flutuante
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
288 Visualizações
Deixe um comentário