Subscribe Button with Bell

<label class="btn-subscribe-bell">
  <input class="btn-subscribe-bell-input" type="checkbox" aria-label="Subscribe">
  <span class="btn-subscribe-bell-face" aria-hidden="true">
    <span class="btn-subscribe-bell-bell">
      <svg viewBox="0 0 24 24"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2H4.5z"/><path d="M10 21a2.2 2.2 0 0 0 4 0"/></svg>
      <span class="btn-subscribe-bell-badge"></span>
    </span>
    <span class="btn-subscribe-bell-text"><span>Subscribe</span><span>Subscribed</span></span>
  </span>
</label>

.btn-subscribe-bell {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-subscribe-bell-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-subscribe-bell-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.6em;
  height: 2.8em;
  border-radius: 1.4em;
  background-color: var(--c);
  color: #fff;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.2s ease;
}
.btn-subscribe-bell-bell {
  position: absolute;
  top: 50%;
  left: 1em;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.625em;
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 10%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-subscribe-bell-bell svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.btn-subscribe-bell-badge {
  position: absolute;
  top: -0.1em;
  right: -0.15em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid color-mix(in srgb, var(--c) 14%, #f4f5f7);
  border-radius: 50%;
  background: #ef4444;
  transform: scale(0);
}
.btn-subscribe-bell-text {
  display: grid;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-subscribe-bell-text span {
  grid-area: 1 / 1;
  text-align: center;
  transition: opacity 0.25s ease;
}
.btn-subscribe-bell-text span:last-child { opacity: 0; }
.btn-subscribe-bell:active .btn-subscribe-bell-face { transform: scale(0.95); }
.btn-subscribe-bell-input:focus-visible ~ .btn-subscribe-bell-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face {
  background-color: color-mix(in srgb, var(--c) 14%, #f4f5f7);
  color: color-mix(in srgb, var(--c) 30%, #111827);
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text { transform: translateX(0.8em); }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text span:first-child { opacity: 0; }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text span:last-child { opacity: 1; }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-bell {
  opacity: 1;
  transform: scale(1);
  animation: btn-subscribe-bell-ring 1s ease-in-out 0.25s;
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-badge {
  animation: btn-subscribe-bell-pop 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.6) 0.9s forwards;
}
@keyframes btn-subscribe-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(24deg); }
  25% { transform: rotate(-20deg); }
  40% { transform: rotate(14deg); }
  55% { transform: rotate(-9deg); }
  70% { transform: rotate(5deg); }
  85% { transform: rotate(-2deg); }
}
@keyframes btn-subscribe-bell-pop {
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-subscribe-bell, .btn-subscribe-bell *, .btn-subscribe-bell::before, .btn-subscribe-bell::after, .btn-subscribe-bell *::before, .btn-subscribe-bell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar buttons