Bubble Button

Bubble Button

Copy to clipboard
View CSS
View HTML

				.clip-btn {
  position: relative;
  background: rgb(61, 90, 250);
  width: 150px;
  height: 50px;
  text-decoration: none;
  cursor: pointer;
}

.clip-bg {
  clip-path: circle(20px at 5px 5px);
  transition: all 1s ease;
  border-radius: 5px;
  background: rgb(25, 60, 199);
  height: 100%;
  width: 100%;
}

.clip-btn:hover .clip-bg {
  clip-path: circle(100%);
}

.clip-btn-text {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}				

					<a href="#" class="clip-btn">
  <div class="clip-bg"></div>
  <div class="clip-btn-text">
    BUTTON
  </div>
</a>