Criando um Balão Animado somente com CSS e HTML


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