Button using HTML and CSS

In this article, we will create a chat button using HTML CSS

HTML code: Defines the structure of document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="chatbox" onclick="this.classList.toggle('active')">
    <div class="background"></div>
    <svg class="chatbubble" 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" r="1.9" cy="50.7" cx="49.9" />
      <circle class="circle circle3" r="1.9" cy="50.7" cx="57.3" />
    </svg>
  </div>
</body>
</html>

CSS code:  Control the style of a web document in a simple and easy way.

body {
	align-items: center;
	display: flex;
	justify-content: center;
	height: 100vh;
  }
  .chatbox {
	display: flex;
	position: relative;
  }
  .background {
	background-color: #e77080;
	border-radius: 30%;
	height: 80px;
	left: 10px;
	position: absolute;
	top: 10px;
	width: 80px;
  }
  .chatbubble {
	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);
  }

Output :

See also  Directional Statusline In Pure CSS - Powerline.css

Leave a Reply

Your email address will not be published. Required fields are marked *