Os action buttons ou botões fluantes, são aqueles botões muito comuns de se ver principalmente em dispositivos mobile ou outros aparelhos de telas pequenas. São botões que ficam no canto inferior direito da tela, ou em qualquer outro canto a disposição do usuário interagir com ele para executar ações rápidas, seja um cadastro ou um menu com atalhos.

Veja a demonstração
Durante todo o tempo que você estiver dentro deste artigo do blog, no canto inferior direito terá um action button. Esse é o exemplo final do action button que vou disponibilizar neste artigo.
Veja outros exemplos de botões flutuantes:
Pesquisar Mais botões Superior esquerdo

Simplicidade e eficácia
Aos leitores que já frenquentam o blog e também leram meus artigos em que disponibilizo plugins ou alguma ferramenta de interface, sabe que eu costumo apenas disponibilizar aqui no blog apenas materais de fácil aplicação. É muito comum navegarmos na internet e encontrar um monte de botões muito bonitos, botões até em 3D super legais, mas o problema é na hora de implementar. É horrível ter que implementar três tipos de arquivos CSS, dois arquivos JS e ainda realizar alterações no CSS para não entrar em conflito com o estilo já implementado da nossa página.
Com este código abaixo você poderá implementar este botão super simpático com pouquíssimas linhas de CSS. Estou utlizando Bootstrap v4 para este exemplo.

/* Botão pesquisar e Mais Botões */
.btnPesquisar, .btnMaisBotoes{
	position: fixed;
	float: bottom;
	bottom: 15px;
	right: 15px;
	z-index: 100;
}

/* Botão superior esquerdo */
.btnSupEsquerdo{
	position: fixed;
	float: top;
	top: 15px;
	left: 15px;
	z-index: 100;
}

.btnPesquisarInput, .btnPesquisarBtn , .btnMaisBotoesBtn, .btnMaisBotoesGrupo{
	display: inline-block;
}

.btnCircular{
	border-radius: 50%;
}

.btnPrincipal{
	font-size: 20px;
	padding: 15px;
}

.btnSecundario{
	font-size: 15px;
	padding: 10px;
}

Com esse CSS super pequeno a gente pode construir uma estrutura HTML bem simples para confortar todos os três botões de demonstração acima:

<!-- hidden-sm-up -->

<!-- botão pesquisar -->
<div class="btnPesquisar">
	<div class="col-9 btnPesquisarInput" style="display:none;">
		<input type="text" class="form-control" placeholder="Pesquisar..."/>
	</div>
	<div class="col-3 btnPesquisarBtn">
		<button class="btn btn-danger btnCircular btnPrincipal" name="1"><i class="fa fa-search"></i></button>
	</div>
</div>

<!-- botão mais botões -->
<div class="btnMaisBotoes">
	<div class="col-6 btnMaisBotoesGrupo" style="display: none;">
		<button class="btn btn-primary btnCircular btnSecundario"><i class="fa fa-user"></i></button>
		<button class="btn btn-primary btnCircular btnSecundario"><i class="fa fa-facebook-square"></i></button>
		<button class="btn btn-primary btnCircular btnSecundario"><i class="fa fa-map"></i></button>
	</div>
	<div class="col-3 btnMaisBotoesBtn">
		<button class="btn btn-info btnCircular btnPrincipal" name="2"><i class="fa fa-plus"></i></button>
	</div>
</div>

<!-- botão superior esquerdo -->
<div class="btnSupEsquerdo">
	<button class="btn btn-warning btnCircular btnPrincipal" name="3"><i class="fa fa-question"></i></button>
</div>

Perceba que eu deixei comentado a seguinte classe do Bootstrap v4 "hidden-sm-up". Isso é uma questão de estética e até mesmo de ética na construção de páginas web. Normalmente utiliza-se os action buttons quando temos muitos elementos em um determinado lugar da página, e quando a tela sofre diminuição de largura, ou seja, quando é acessada por um dispositivo mobile, esses elementos ficam mal posicionados ou até mesmo sejam forçados a serem retirados da tela em dispositivos menores. Nesse caso, utilizar o Bootstrap para esconder os botões flutuantes em dispositivos grandes e exibí-los apenas em dispositivos menores com todo o conteúdo dentro do botão deixando seu site mais limpo. Se for utilizar os botões flutuantes em versão desktop, recomendo que utilize links invés de buttons, pois ao clicar nos buttons ficará marcado um quadrado de "selected" em volta do botão na versão desktop, o que não acontece com outros dispositivos (tablets, celulares, etc).
A classe a acima é referente a visible-xs visible-sm no Bootstrap v3.

Ainda falta as ações do botões, e esta parte você pode variar bastante. É bem legal inserir efeitos de animações nos botões utilizando o jQueryUI, mas para este exemplo eu vou fazer algo bem básico e simples com jQuery simples, de fácil entendimento. Veja:

function toggleBtn(botao){
	var elemento;
	switch(botao){
		case 1: elemento = $(".btnPesquisarInput input"); break;
		case 2: elemento = $(".btnMaisBotoesGrupo"); break;
		//case 3: Clique aqui para saber mais sobre o diálogo!
		}
	
	if(elemento.is(":visible")){
		elemento.hide(300);
	}else{
		elemento.show(300);
		// elemento.focus(); -- Focar o campo caso seja texto
	}
	
	// Se quiser que o botão pesquisa feche ao desfocar o input
	// $(".btnPesquisarInput input").blur(function(){ toggleBtn(1); });
}

$(".btnPesquisarBtn button, .btnMaisBotoesBtn button, .btnSupEsquerdo button").click(function(){
	var botao = $(this).attr("name");
	botao = parseInt(botao);
	toggleBtn(botao);
});

Esse script é algo bem simples e funciona para a lógica dos meus botões, provavelmente você venha a implementar algo diferente no seu projeto. O principal é o momento de mostrar e esconder os elementos que ficam no action do botão. Se você estiver usando a biblioteca do jQueryUI, colocar o efeito de slide vertical fica muito legal.
Há também alguns aspectos interessantes a se observar, como por exemplo, em um dos códigos que eu deixei comentado há como focar o input de texto assim que o usuário clicar no botão, o que é extremamente apropriado para mobiles, pois dessa forma quando o usuário tocar no botão flutuante, o teclado do celular abrirá juntamente com input de texto.

Este foi mais um código muito simples e que funciona muito bem com pouquíssimas linhas de CSS e algum Javascript quebra-galho. Como observado no terceiro botão de demonstração, tem um outro artigo aqui no blog em que passo mais uma dica de interface com diálogos que aparecem para o usuário e desaparece logo em seguida, ficando acima de todos os elementos da página. Da mesma forma que foi feito estes botões, o diálogo também é extremamente simples e eficaz, feito apenas em uma única função de JavaScript que você pode implementar em qualquer parte do seu projeto. Você pode clicar aqui para ler este artigo.
Obrigado pela sua presença aqui, e não se esqueça de curtir a página do blog no Facebook, pois dessa forma você será sempre notificado de novos artigos e dicas úteis como essa assim que forem lançados! Adicione também o blog nos favoritos do seu navegador e continue acompanhando os artigos semanais!