Botão Css – Formato Balão Float Right

Botão Css – Formato Balão Float Right

Neste artigo vamos fazer um botão com Css e html com formato de Balão.

Vamos Adicionar o Html:

   <a href="#" class="btn btn-balao-float-right"> <i class="icon icon-comment"></i> Veja mais...</a>

Vamos Adicionar o Css:

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

	}

	.btn-balao-float-right {

	  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-right:before {
	 
	  position: absolute;
	  z-index: -1;
	  top: calc(50% - 10px);
	  right: 0;
	  content: '';
	  border-style: solid;
	  border-width: 8px 0 8px 10px;
	  border-color: transparent transparent transparent #00d4d9;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-property: transform;
	  transition-property: transform;

	}

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

Veja o Resultado!

Baixar Código Veja Funcionando