Chip Insert Button

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="chip-btn">
  <span class="chip-btn__slot">
    <span class="chip-btn__chip"></span>
  </span>
  <span class="chip-btn__label">Insert Card to Pay</span>
</button>

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

.chip-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px 12px 16px;
  border: 1px solid #2a2a33;
  border-radius: 12px;
  background: #17171d;
  color: #e4e4e7;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.chip-btn__slot {
  position: relative;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  background: #0b0b0f;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  flex-shrink: 0;
}
.chip-btn__chip {
  position: absolute;
  top: -20px;
  left: 4px;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(145deg, #f5d78b, #c9a24b);
  transition: top 0.5s cubic-bezier(0.6, -0.2, 0.4, 1.3);
}
.chip-btn:active .chip-btn__chip,
.chip-btn:focus .chip-btn__chip {
  top: 3px;
}
.chip-btn:active .chip-btn__slot,
.chip-btn:focus .chip-btn__slot {
  box-shadow: inset 0 0 0 2px #22c55e, inset 0 2px 4px rgba(0, 0, 0, 0.7);
}
.chip-btn:hover {
  border-color: #3f3f4a;
  background: #1c1c24;
}