Botões de Redes Sociais com Html e Css

Postado: 3 de maio de 2021

Neste artigo vamos usar o pseudo-classes ::before com css.

A notação ::before (com dois dois-pontos) foi introduzida no CSS3 afim de diferenciar pseudo-classes de pseudo-elementos. Navegadores também aceitam a notação :before introduzida no CSS 2.

Vamos Adicionar o Html:

<nav class="btn_social">
                    
   <ul>

       <li><a href="#" target="_blank" title="facebook"><i class="icon icon-facebook"></i></a></li>
       <li><a href="#" target="_blank" title="instagram"><i class="icon icon-instagram"></i></a></li>
       <li><a href="#" target="_blank" title="youtube"><i class="icon icon-youtube"></i></a></li>
       <li><a href="#" target="_blank" title="youtube"><i class="icon icon-whatsapp"></i></a></li>
       <li><a href="#" target="_blank" title="linkdin"><i class="icon icon-linkedin"></i></a></li>
                    
   </ul>

</nav>

Vamos Adicionar o Css:

.btn_social { 

	width:100%; 
	float:left; 
	display:flex; 
	margin:auto; 
}

.btn_social ul  { 

	width:auto; 
	margin:auto; 
	float:left; 
	display:block; 
}

.btn_social ul li  { 

	position:relative; 
	background:#555555; 
	list-style:none; 
	float:left; 
	margin:5px; 
	z-index:1; 
	overflow:hidden; 
	border-radius:3px; 
	font-size:1.5em; 
	text-align:center; 
}

.btn_social ul li a  { 

	width:50px; 
	height:50px; 
	line-height:53px; 
	display:block; 
	text-decoration:none; 
	color:#fff; 
	transition:.4s;

}

.btn_social ul li::before { 

	transition:0.4s; 
	position:absolute; 
	content:''; 
	width:100%; 
	height:100%; 
	top:90%; 
	left:0; 
	background:#2fcacf; 
	z-index:-1; 
	transform: scale(1); 
	transition:.4s; 
}

.btn_social ul li:hover::before { transition:0.4s; top:0%; }
.btn_social ul li a:hover       { color:#555555; }

Baixar Código Veja Funcionando

Publicado por: loopnerd

2.943 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.