Design,Tutoriais - 24 de dezembro de 2018

FAB (Botão Flutuante) com CSS3 e HTML (sem Javascript)

Disclaimer: O comportamento não vai funcionar no iOS, pois o iOS desconsidera as pseudoclasses utilizadas aqui. No lugar, ele utiliza uma pseudoclasse de :hover para significar a seleção sem clique. Ainda estou vendo qual a melhor forma de usar no iOS sem bugar o comportamento em desktop.

Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.

Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.

Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo 😁.

HTML + CSS

Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.

<div class="fab"  ontouchstart="">
  <button class="main" >
  </button>
  <ul>
    <li>
      <label for="opcao1">Opção 1</label>
      <button id="opcao1">
      ⎈
      </button>
    </li>
    <li>
      <label for="opcao2">Opção 2</label>
      <button id="opcao2">
      ⎗
      </button>
    </li>
    <li>
      <label for="opcao3">Opção 3</label>
      <button id="opcao3">
      ☏
      </button>
    </li>
  </ul>
</div>
xxxxxxxxxx
 
0
<div class="fab"  ontouchstart="">
1
  <button class="main" >
2
  </button>
3
  <ul>
4
    <li>
5
      <label for="opcao1">Opção 1</label>
6
      <button id="opcao1">
7
      ⎈
8
      </button>
9
    </li>
10
    <li>
11
      <label for="opcao2">Opção 2</label>
12
      <button id="opcao2">
13
      ⎗
14
      </button>
15
    </li>
16
    <li>
17
      <label for="opcao3">Opção 3</label>
18
      <button id="opcao3">
19
      ☏
20
      </button>
21
    </li>
22
  </ul>
23
</div>

No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.

Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.

Sem mais enrolações, segue o CSS

.fab{
  position: fixed;
  bottom:10px;
  right:10px;
}

.fab button{
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background-color: #cb60b3;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  font-size: 24px;
  color: white;
    
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #5b19b7;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.fab button.main:before{
  content: '⏚';
}

.fab ul{
  position:absolute;
  bottom: 0;
  right: 0;
  padding:0;
  padding-right:5px;
  margin:0;
  list-style:none;
  z-index:10;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab ul li{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-bottom: -10%;
  opacity: 0;
  
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  transition: .3s ease-out;
}

.fab ul li label{
  margin-right:10px;
  white-space: nowrap;
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border-radius:3px;
  height: 18px;
  font-size: 16px;
  pointer-events: none;
  opacity:0;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main:active,
.fab button.main:focus{
  outline: none;
  background-color: #7716ff;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
 }
 
.fab button.main:active:before,
.fab button.main:focus:before{
  content: '↑';
}

.fab button.main:active + ul,
.fab button.main:focus + ul{
  bottom: 70px;
}

.fab button.main:active + ul li,
.fab button.main:focus + ul li{
  margin-bottom: 10px;
  opacity: 1;
}

.fab button.main:active + ul li:hover label,
.fab button.main:focus + ul li:hover label{
  opacity: 1;
}
xxxxxxxxxx
 
0
.fab{
1
  position: fixed;
2
  bottom:10px;
3
  right:10px;
4
}
5
6
.fab button{
7
  cursor: pointer;
8
  width: 48px;
9
  height: 48px;
10
  border-radius: 30px;
11
  background-color: #cb60b3;
12
  border: none;
13
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
14
  font-size: 24px;
15
  color: white;
16
    
17
  -webkit-transition: .2s ease-out;
18
  -moz-transition: .2s ease-out;
19
  transition: .2s ease-out;
20
}
21
22
.fab button.main{
23
  position: absolute;
24
  width: 60px;
25
  height: 60px;
26
  border-radius: 30px;
27
  background-color: #5b19b7;
28
  right: 0;
29
  bottom: 0;
30
  z-index: 20;
31
}
32
33
.fab button.main:before{
34
  content: '⏚';
35
}
36
37
.fab ul{
38
  position:absolute;
39
  bottom: 0;
40
  right: 0;
41
  padding:0;
42
  padding-right:5px;
43
  margin:0;
44
  list-style:none;
45
  z-index:10;
46
  
47
  -webkit-transition: .2s ease-out;
48
  -moz-transition: .2s ease-out;
49
  transition: .2s ease-out;
50
}
51
52
.fab ul li{
53
  display: flex;
54
  justify-content: flex-start;
55
  position: relative;
56
  margin-bottom: -10%;
57
  opacity: 0;
58
  
59
  -webkit-transition: .3s ease-out;
60
  -moz-transition: .3s ease-out;
61
  transition: .3s ease-out;
62
}
63
64
.fab ul li label{
65
  margin-right:10px;
66
  white-space: nowrap;
67
  display: block;
68
  margin-top: 10px;
69
  padding: 5px 8px;
70
  background-color: white;
71
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
72
  border-radius:3px;
73
  height: 18px;
74
  font-size: 16px;
75
  pointer-events: none;
76
  opacity:0;
77
  
78
  -webkit-transition: .2s ease-out;
79
  -moz-transition: .2s ease-out;
80
  transition: .2s ease-out;
81
}
82
83
.fab button.main:active,
84
.fab button.main:focus{
85
  outline: none;
86
  background-color: #7716ff;
87
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
88
 }
89
 
90
.fab button.main:active:before,
91
.fab button.main:focus:before{
92
  content: '↑';
93
}
94
95
.fab button.main:active + ul,
96
.fab button.main:focus + ul{
97
  bottom: 70px;
98
}
99
100
.fab button.main:active + ul li,
101
.fab button.main:focus + ul li{
102
  margin-bottom: 10px;
103
  opacity: 1;
104
}
105
106
.fab button.main:active + ul li:hover label,
107
.fab button.main:focus + ul li:hover label{
108
  opacity: 1;
109
}

O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.

Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!

Versão com Javascript:

Rodrigo Portillo

Gosto tanto de design que aprendi programação e regras para garantir a estabilidade de meus projetos. Trabalho e trabalhei com desenvolvimento full-stack em diversas linguagens, como Flex, PHP, Java, Javascript, dentre outras. Ainda trabalhei alguns anos como designer gráfico e ilustrador.
Busque mais informaçoes pelo LinkedIn.

Velho Bit

HTML + CSS

Rodrigo Portillo