Swipe to Pay Button

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="swipe-pay">
  <input type="range" min="0" max="100" value="0" class="swipe-pay__range" />
  <div class="swipe-pay__track">
    <span class="swipe-pay__fill"></span>
    <span class="swipe-pay__knob">→</span>
    <span class="swipe-pay__text">Slide to Pay</span>
  </div>
</div>

/*
 * Author: @samir-khan
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.swipe-pay {
  position: relative;
  width: 260px;
  height: 54px;
}
.swipe-pay__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 2;
}
.swipe-pay__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #16161c;
  border: 1px solid #2a2a33;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.swipe-pay__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--p, 0) * 1%);
  background: linear-gradient(90deg, #16a34a, #22c55e);
  transition: width 0.1s linear;
}
.swipe-pay__knob {
  position: absolute;
  left: calc(var(--p, 0) * 1% * 0.82 + 4px);
  top: 4px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #16161c;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: left 0.1s linear;
  z-index: 1;
}
.swipe-pay__text {
  width: 100%;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #d4d4dc;
  letter-spacing: 0.03em;
  pointer-events: none;
}
.swipe-pay__range:focus ~ .swipe-pay__track {
  border-color: #22c55e;
}