Botão Css – Formato Balão Float Top
Postado: 23 de dezembro de 2021
Tempo de Leitura: < 1 Minuto
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 !
Deixe um comentário