Botão Css – Formato Balão Float Lefet

Botão Css – Formato Balão Float Lefet

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

Vamos Adicionar o Html:

     <a href="#" title="Veja mais..." class="btn btn-balao-float-left"> <i class="icon icon-comments"></i> Veja mais...</a>

Vamos Adicionar o Css:

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

	}

	.btn-balao-float-left {

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

	}

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

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

Veja o Resultado!

Baixar Código Veja Funcionando