O código para fazer o balão com efeito é bem simples! (Exemplo abaixo do código) Basta copiar e colar:
<style>
.balao {
position: absolute;
padding: 2px;
padding-left: 5px;
padding-top: 5px;
margin: 1em 0 3em;
color: #000;
background: #000000 ;
border-radius: 5px;
width: 120;
height: 44;
color: white;
display:block;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
.balao:hover {
position: absolute;
padding: 2px;
padding-left: 5px;
padding-top: 5px;
margin: 1em 0 3em;
color: #000;
background: #000000 ;
border-radius: 50px;
width: 135;
height: 44;
color: gray;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}
.balao:after {
content: "";
display: block;
position: absolute;
bottom: -15px;
left: 25px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #000000 transparent;
}
</style>
<div class=balao">
<strong>"balao">
<strong><center>SEU TEXTO</center></p>
</div>
Como vai ficar:
SEU TEXTO
Caso você tenha alguma dúvida basta escreve-la nos comentários!
:D
