- Página Inicial
- Códigos CSS Prontos
- Botão animado de chat fixo no HTML
- Voltar
Botão animado de chat fixo no HTML
Hoje veremos como criar um botão animado de chat fixo no HTML
Nesta seção, projetaremos uma estrutura básica no html.
Usaremos A Tag <div>, <svg>, <path>, <g>, <circle>.
Essas são as tags que usaremos no html
Vamos Adicionar o Html
<div class="chat" onclick="this.classList.toggle('active')"> <div class="background"></div> <svg class="chat-bubble" width="100" height="100" viewBox="0 0 100 100"> <g class="bubble"> <path class="line line1" d="M 30.7873,85.113394 30.7873,46.556405 C 30.7873,41.101961 36.826342,35.342 40.898074,35.342 H 59.113981 C 63.73287,35.342 69.29995,40.103201 69.29995,46.784744" /> <path class="line line2" d="M 13.461999,65.039335 H 58.028684 C 63.483128,65.039335 69.243089,59.000293 69.243089,54.928561 V 45.605853 C 69.243089,40.986964 65.02087,35.419884 58.339327,35.419884" /> </g> <circle class="circle circle1" r="1.9" cy="50.7" cx="42.5" /> <circle class="circle circle2" cx="49.9" cy="50.7" r="1.9" /> <circle class="circle circle3" r="1.9" cy="50.7" cx="57.3" /> </svg> </div><!--Botão chat-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o Botão de chat.
.chat { display: flex; position: fixed; right: 45px; bottom: 45px; } .background { background-color: #14b6db; border-radius: 50%; box-shadow: 0 2.1px 1.3px rgba(0, 0, 0, 0.044), 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061), 0 25px 20px rgba(0, 0, 0, 0.1); height: 80px; left: 10px; position: absolute; top: 10px; width: 80px; } .chat-bubble { cursor: pointer; position: relative; } .bubble { transform-origin: 50%; transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9); } .line { fill: none; stroke: #ffffff; stroke-width: 2.75; stroke-linecap: round; transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1); } .line1 { stroke-dasharray: 60 90; stroke-dashoffset: -20; } .line2 { stroke-dasharray: 67 87; stroke-dashoffset: -18; } .circle { fill: #ffffff; stroke: none; transform-origin: 50%; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); } .active .bubble { transform: translateX(24px) translateY(4px) rotate(45deg); } .active .line1 { stroke-dashoffset: 21; } .active .line2 { stroke-dashoffset: 30; } .active .circle { transform: scale(0); }
Combinando as Duas seções acima Html + Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
607 Visualizações
Deixe um comentário