Botão Efeito Flutuante com Css

Neste artigo vamos aprender a fazer um botão com efeito flutuante com css.

vamos adicionar o Html:

<a href="#" class="botao flutuante"><i class="icon icon-book-1"></i> Leia mais</a> 
<a href="#" class="botao flutuante"><i class="icon icon-pencil-1"></i> Publicar</a>
<a href="#" class="botao flutuante"><i class="icon icon-trashcan"></i> Deletar</a> 
<a href="#" class="botao flutuante"><i class="icon icon-upload"></i> Upload</a> 

Vamos Adicionar o Css:

.botao {  

    display: inline-block;  
    padding: 0.8em 1.2em;    
    background-color:#0987D2;  
    text-decoration: none;  
    color: #ffffff;
    border-radius:50px;
    font-family:'open_sansregular';  
} 
     
.flutuante {  
  display: inline-block;  
  -webkit-transition-duration: 0.4s;  
  transition-duration: 0.4s;  
  -webkit-transition-property: -webkit-transform;  
  transition-property: transform;  
  -webkit-transform: translateZ(0);  
  -ms-transform: translateZ(0);  
  transform: translateZ(0);  
  box-shadow: 0px 4px 2px 0px rgba(98, 98, 98, 0.69);
}  
      
.flutuante:hover {  
  -webkit-transform: translateY(-5px);  
  -ms-transform: translateY(-5px);  
  transform: translateY(-5px);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.69);  
} 

Veja o código funcionando abaixo:

Baixar Código Veja Funcionando