Botão Css – Formato Balão Float Bottom

Botão Css – Formato Balão Float Bottom

Neste artigo vamos fazer um botão com Css e html com formato de Balão ao passarmos o mouse ele Desce ficando com o formato de balãozinho.

Vamos Adicionar o Html:

   <a href="#" title="Veja mais..." class="btn btn-balao-float-bottom"> <i class="icon icon-angle-down"></i> Veja mais...</a>

Vamos Adicionar o Css:

	.btn {
	  
      padding: 1em 1.2em;
	  cursor: pointer;
	  background: #00d9b0;
	  text-decoration: none;
	  color: #ffffff;
	  font-family: 'open_sansregular';
	  border-radius:6px; 
	  -webkit-tap-highlight-color: rgba(0,0,0,0);

	}

	.btn-balao-float-bottom {
	
	  display: inline-block;
	  vertical-align: middle;
	  -webkit-transform: translateZ(0);
	  transform: translateZ(0);
	  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -moz-osx-font-smoothing: grayscale;
	  position: relative;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-property: transform;
	  transition-property: transform;
	
	}
	
	.btn-balao-float-bottom:before {
	  
	  position: absolute;
	  z-index: -1;
	  content: '';
	  left: calc(50% - 10px);
	  top: 0;
	  border-style: solid;
	  border-width: 0 8px 10px 8px;
	  border-color: transparent transparent #00d9b0 transparent;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-property: transform;
	  transition-property: transform;
	
	}

	.btn-balao-float-bottom:hover, .btn-balao-float-bottom:focus, .btn-balao-float-bottom:active {
	
	  -webkit-transform: translateY(10px);
	  transform: translateY(10px);
	
	}

	.btn-balao-float-bottom:hover:before, .btn-balao-float-bottom:focus:before, .btn-balao-float-bottom:active:before {
	
	  -webkit-transform: translateY(-10px);
	  transform: translateY(-10px);
	
	}

Veja o Resultado !

Baixar Código Veja Funcionando