Criar Botões de Partilha Social Animados | HTML, CSS3, Font Awesome

Introdução

Neste Lab, você aprenderá como criar botões de compartilhamento social animados usando HTML e CSS3. Estes botões utilizam a biblioteca Font Awesome para os ícones e são estilizados com CSS para fornecer um efeito de transição suave ao passar o mouse (hover). Ao final deste guia, você terá um conjunto de botões sociais bonitos e responsivos que poderá integrar em qualquer site.

Introdução aos Ícones

Para usar os ícones do Font Awesome, basta usar o prefixo "fa" seguido pelo nome do ícone.

O formato específico é o seguinte: <i class="fa ICON_NAME"></i>

Para introduzir os ícones necessários da biblioteca de ícones, escreva o seguinte código no arquivo index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Social Sharing Buttons</title>

    <!--Icon Library-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div>
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-pinterest"></i>
    </div>
  </body>
</html>

O resultado é o seguinte:

Usar seletores de pseudo-classe permite que o estilo mude quando o mouse passa sobre o objeto vinculado. Portanto, adicionamos um link vazio ao ícone, ou você pode vincular às respectivas páginas iniciais das redes sociais.

Sintaxe da pseudo-classe: selector:pseudo-class {property:value;}

a:hover {property:value;} define o estilo exibido quando o mouse passa sobre o link.

Defina os seletores de classe necessários para facilitar a estilização subsequente dos respectivos botões.

<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

Visualização do efeito:

Os ícones do Font Awesome ficam azuis porque, após aplicar a tag <a>, a cor da fonte padrão é azul.

Definição do Estilo dos Ícones

Antes de definir o estilo dos ícones, adicionamos a folha de estilo style.css na tag <head> do index.html.

<link rel="stylesheet" href="style.css" />

Para padronizar o estilo geral, defina um estilo global em style.css.

/* Global style settings */
* {
  margin: 0;
  padding: 0;
}
a,
img {
  border: 0;
}
body {
  background: #eee;
}

Para embelezar os ícones vetoriais fornecidos pela fonte Font Awesome, vamos primeiro definir suas cores.

.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter .fa {
  color: #00aff0;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.instagram .fa {
  color: #bf00ff;
}
.social-btns .btn.pinterest .fa {
  color: #cc0000;
}

Visualização do efeito:

Em seguida, definiremos o ícone para ampliar instantaneamente quando tocado e mudar sua cor. Para o efeito de ampliação instantânea, podemos usar transform: scale(0.8) para reduzir o ícone para 80% de seu tamanho original e, quando o evento de toque ocorrer, ele é redimensionado de volta ao seu tamanho original usando transform: scale(1).

Insira o seguinte código no arquivo style.css:

.social-btns .btn .fa {
  /* Set the default link display style */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns .btn:focus .fa, /* Select the focused button style */
.social-btns .btn:hover .fa {
  /* Set the mouse-over link display style */
  color: #fff; /* Change its color */
  -webkit-transform: scale(1);
  transform: scale(1);
}
.social-btns .btn .fa {
  /* Set the size and vertical alignment of the icons provided by Font Awesome */
  font-size: 38px;
  vertical-align: middle;
}

Visualização do efeito:

Definição do Estilo do Botão

Para estruturar a página, centralizamos os botões na página, definimos-os como elementos inline de nível de bloco e, em seguida, embelezamos os botões.

O atributo display especifica o tipo de elemento a ser gerado:

display:inline define-o como um elemento inline, compartilhando uma linha com outros elementos, ou seja, não ocupando uma linha exclusivamente.
display:block define-o como um elemento de nível de bloco e ocupa uma linha exclusivamente.
display:inline-block combina os dois métodos acima para defini-lo como um elemento de nível de bloco que não ocupa uma linha exclusivamente.

.social-btns {
  height: 90px;
  margin: 80px auto;
  font-size: 0;
  text-align: center; /* horizontally centering */
}
.social-btns .btn {
  display: inline-block; /* set the button as a block-level element that does not occupy a row exclusively */
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px; /* set line height */
  margin: 0 10px;
  text-align: center;
  position: relative; /* set to relative positioning */
  overflow: hidden; /* hide overflow content */
  border-radius: 28%; /* round the corners of the DIV */
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* add shadow to the DIV element */
  opacity: 0.99; /* specify opacity. From 0.0 transparent to 1.0 completely opaque */
}

Visualização do efeito:

Descobrimos que, quando o botão é tocado, tanto o ícone quanto o fundo do botão ficam brancos, o que não é fácil de ver claramente. Portanto, precisamos definir o estilo de toque do fundo do botão. Primeiro, precisamos girar o btn:before em 45° no sentido horário usando transform: rotate(45deg). Em seguida, ajuste as posições inicial e final de btn:before.

Seletor before: Insere novo conteúdo antes do conteúdo do elemento.

.social-btns .btn:before {
  /*Set the top and left values before the content of each btn element, i.e. the position of the btn when not touched*/
  top: 90%;
  left: -110%;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  /*Adjusts the position of the button when touched*/
  top: -10%;
  left: -10%;
}
.social-btns .btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  /*Flip btn:before by 45° clockwise*/
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Set the btn:before color, i.e. the button's background color after touching*/
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #00aff0;
}
.social-btns .btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.pinterest:before {
  background-color: #cc0000;
}

Visualização do efeito:

Finalmente, fazemos ajustes de transição nos botões, usando principalmente o atributo transition-timing-function para definir a curva de velocidade do efeito de transição para torná-lo visualmente mais suave.

Sintaxe de transition-timing-function:

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

Adicione o seguinte estilo a style.css:

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  transition: all 0.35s; /* all styles 0.35 seconds easing */
  transition-timing-function: cubic-bezier(
    0.31,
    -0.105,
    0.43,
    1.59
  ); /* specify the speed of the transition effect */
}

Visualização do efeito:

Nota: Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Expansão do Conhecimento

Não apenas podemos definir o efeito ao passar o mouse sobre um hiperlink, mas também podemos usar seletores de pseudo-classe para definir efeitos para hiperlinks não visitados, visitados e selecionados.

a:link {attribute: value;} define o efeito para hiperlinks não visitados.
a:visited {attribute: value;} define o efeito para hiperlinks visitados.
a:active {attribute: value;} define o efeito para hiperlinks selecionados.

Resumo

Neste Lab, aprendemos o seguinte:

Referências da biblioteca de ícones Font Awesome
Seletores de pseudo-classe CSS
Propriedades de transformação CSS (CSS transform properties)
A propriedade display
Seletor before

Este Lab usa CSS para transformar um ícone estático em um botão com efeitos dinâmicos. CSS não só pode configurar um estilo uniforme para estilos repetitivos para melhorar a eficiência do desenvolvimento web, mas também configurar uma variedade de elementos de acordo com as necessidades da página web para atingir o objetivo de embelezar a página web e aprimorar a sensação de uso do usuário.

Botões de Partilha Social Animados com CSS

Introdução

Introdução aos Ícones

Definição do Estilo dos Ícones

Definição do Estilo do Botão

Resumo