Criando um Balão Animado somente com CSS e HTML

Como vai ficar:


SEU TEXTO





O código para fazer o balão com efeito é bem simples! 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: 80px;
  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>


Caso você tenha alguma dúvida basta escreve-la nos comentários! :D

HOT NA SEMANA

C, Ordenar um Vetor em Ordem Crescente

CSS, Efeito clarear e escurecer em CSS

C, Programa Números em Ordem Crescente

Omegle Saiu do Ar







© Copyright 2017 - INFORMATICODE, todos os direitos reservados.