Botão Css – Formato Balão Float Top

Botão Css – Formato Balão Float Top

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

Vamos Adicionar o Html:

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

Vamos Adicionar o Css:

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

	}


	.btn-balao-float-top {
	 
	  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-top:before {
	
	  position: absolute;
	  z-index: -1;
	  content: '';
	  left: calc(50% - 10px);
	  bottom: 0;
	  border-style: solid;
	  border-width: 8px 8px 0 8px;
	  border-color: #d9008e transparent transparent transparent;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-property: transform;
	  transition-property: transform;
	
	}

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

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

Veja o Resultado !

Baixar Código Veja Funcionando