Carregando...
Desenvolvimento Web

Botões de redes sociais efeito hover

Postado: 1 de janeiro de 2023 Tempo de Leitura: 4 Minutos

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

529 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados