Botões de redes sociais efeito hover
Como criar efeitos de hover em seus botões.
Hover é um seletor css usado para selecionar elementos quando você passa o mouse sobre eles.
A pseudo-classe :hover corresponde quando o usuário designa um elemento com um dispositivo apontador, mas não necessariamente o ativa. Este estilo pode ser substituído por qualquer outra pseudo-classe de link-relacionados, isto é :link, :visited, e :active, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, você precisa colocar a regra:hoverdepois das regras :link e :visited mas antes da regra :active, como definido pela ordem LVHA: :link — :visited — :hover — :active.
A pseudo-class :hover pode ser aplicada a qualquer pseudo-elemento. Experimental.
User agents visuais como Firefox, Internet Explorer, Safari, Opera ou Chrome, aplicam o estilo associado quando o cursor(mouse pointer) passa sobre um elemento.
Note: Nota de uso: em telas de toque (touch screens) :hover é impossível ou problemático. Dependendo do navegador a pseudo-classe :hover pode nunca funcionar, ou funcionar apenas por um curto momento depois de “tocar” um elemento, ou podem continuar a funcionar mesmo depois que o usuário pare de “tocar” o elemento até que o usuário toque outro elemento. Como dispositivos touchscreen são comuns, é importante para desenvolvedores web não terem conteúdos acessíveis apenas quando passamos sobre ele, uma vez que esse conteúdo é mais complicado ou impossível de acessar para usuários desses dispositivos.
Neste tutorial vamos fazer botões de redes sociais efeito hover com html e css.
Nesta seção, projetaremos uma estruturas básica no html.
Usaremos A Tag <div>,<span>,<i> e a tag <a> para inserirmos o link de destino.
Essas são as tags que usaremos no html
Vamos Adicionar o Html
<div class="box-social">
<a href="#" class="facebook">
<i class="icon icon-facebook"></i>
<span>facebook</span>
</a>
<a href="#" class="pinterest">
<i class="icon icon-pinterest"></i>
<span>pinterest</span>
</a>
<a href="#" class="twitter">
<i class="icon icon-twitter"></i>
<span>twitter</span>
</a>
<a href="#" class="instagram">
<i class="icon icon-instagram"></i>
<span>instagram</span>
</a>
</div>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para projetar os nossos botões.
.box-social {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
@keyframes pop {
0% {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
90% {
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
50% {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
70% {
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 1;
}
100% {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
/*Facebook*/
.facebook {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
text-align: center;
text-decoration:none;
float: left;
margin-right: 30px;
}
.facebook:hover span { color: #fff; }
.facebook:hover i { color: #fff; }
.facebook:hover span, .facebook:hover i { transform: translateY(-5px); }
.facebook:hover:before { animation: pop 0.5s; animation-fill-mode: forwards; }
.facebook:hover:after {
animation: pulse 0.5s;
animation-fill-mode: forwards;
}
.facebook:before, .facebook:after {
content: "";
top: 0;
left: 0;
width: 120px;
height: 120px;
position: absolute;
border: 1px solid #1877f2;
border-radius: 100%;
}
.facebook:after {
background-color: #1877f2;
transform: scale(0.1);
opacity: 0;
}
.facebook span, .facebook i {
z-index: 1;
}
.facebook {
transition: 0.5s;
}
.facebook span {
transition: 0.5s;
color: #1d9bf0;
font-size: 18px;
font-family: 'open_sansregular';
}
.facebook i {
transition: 0.5s;
color: #1d9bf0;
font-size: 3.2em;
height: 55px;
}
/*Facebook*/
/*pinterest*/
.pinterest {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
text-align: center;
text-decoration:none;
float: left;
margin-right: 30px;
}
.pinterest:hover span { color: #fff; }
.pinterest:hover i { color: #fff; }
.pinterest:hover span, .pinterest:hover i { transform: translateY(-5px); }
.pinterest:hover:before { animation: pop 0.5s; animation-fill-mode: forwards; }
.pinterest:hover:after {
animation: pulse 0.5s;
animation-fill-mode: forwards;
}
.pinterest:before, .pinterest:after {
content: "";
top: 0;
left: 0;
width: 120px;
height: 120px;
position: absolute;
border: 1px solid #e60023 ;
padding: 3px;
border-radius: 100%;
}
.pinterest:after {
background:#e60023;
transform: scale(0.1);
opacity: 0;
}
.pinterest span, .pinterest i {
z-index: 1;
}
.pinterest {
transition: 0.5s;
}
.pinterest span {
transition: 0.5s;
color: #e60023 ;
font-size: 18px;
font-family: 'open_sansregular';
}
.pinterest i {
transition: 0.5s;
color: #e60023;
font-size: 3.2em;
height: 55px;
}
/*pinterest*/
/*twitter*/
.twitter {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
text-align: center;
text-decoration:none;
float: left;
margin-right: 30px;
}
.twitter:hover span { color: #fff; }
.twitter:hover i { color: #fff; }
.twitter:hover span, .twitter:hover i { transform: translateY(-5px); }
.twitter:hover:before { animation: pop 0.5s; animation-fill-mode: forwards; }
.twitter:hover:after {
animation: pulse 0.5s;
animation-fill-mode: forwards;
}
.twitter:before, .twitter:after {
content: "";
top: 0;
left: 0;
width: 120px;
height: 120px;
position: absolute;
border: 1px solid #1d9bf0;
border-radius: 100%;
}
.twitter:after {
background-color: #1d9bf0;
transform: scale(0.1);
opacity: 0;
}
.twitter span, .twitter i {
z-index: 1;
}
.twitter {
transition: 0.5s;
}
.twitter span {
transition: 0.5s;
color: #1d9bf0;
font-size: 18px;
font-family: 'open_sansregular';
}
.twitter i {
transition: 0.5s;
color: #1d9bf0;
font-size: 3.2em;
height: 55px;
}
/*twitter*/
/*instagram*/
.instagram {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
text-align: center;
text-decoration:none;
float: left;
}
.instagram:hover span { color: #fff; }
.instagram:hover i { color: #fff; }
.instagram:hover span, .instagram:hover i { transform: translateY(-5px); }
.instagram:hover:before { animation: pop 0.5s; animation-fill-mode: forwards; }
.instagram:hover:after {
animation: pulse 0.5s;
animation-fill-mode: forwards;
}
.instagram:before, .instagram:after {
content: "";
top: 0;
left: 0;
width: 120px;
height: 120px;
position: absolute;
border: 1px solid #fd5949;
padding: 3px;
border-radius: 100%;
}
.instagram:after {
background:hsl(0 0% 10%);
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
transform: scale(0.1);
opacity: 0;
}
.instagram span, .instagram i {
z-index: 1;
}
.instagram {
transition: 0.5s;
}
.instagram span {
transition: 0.5s;
color: #fd5949;
font-size: 18px;
font-family: 'open_sansregular';
}
.instagram i {
transition: 0.5s;
color: #fd5949;
font-size: 3.2em;
height: 55px;
}
/*instagram*/
Combinando as Duas seções acima Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
489 Visualizações
Deixe um comentário