Slide-To-Unlock Promo Voucher Widget

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="slide-voucher-card"><div class="v-header"><span class="v-tag">EXCLUSIVE OFFER</span><h4>Unlock Extra 20% Off</h4></div><div class="slide-track"><div class="slide-fill"></div><div class="slide-thumb">➔</div><span class="slide-text">Slide to reveal code</span></div></div>

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

.slide-voucher-card { width: 230px; background: #18181b; border: 1px solid #27272a; border-radius: 18px; padding: 16px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.v-header { text-align: center; margin-bottom: 14px; }
.v-tag { font-size: 6px; font-weight: 900; color: #f43f5e; background: rgba(244,63,94,0.1); padding: 2px 6px; border-radius: 4px; letter-spacing: 1px; }
.v-header h4 { color: #f43f5e; font-size: 11px; font-weight: 800; margin: 6px 0 0; }
.slide-track { position: relative; height: 36px; background: #27272a; border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.05); }
.slide-text { font-size: 7px; font-weight: 800; color: #a1a1aa; pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; }
.slide-thumb { position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; background: #f43f5e; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 2; transition: transform 0.2s; box-shadow: 0 0 10px rgba(244,63,94,0.5); }
.slide-thumb:hover { transform: scale(1.05); }