Digital Gift Card Amount Selector Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="gift-card-form" onsubmit="return false;"><h4>Send a Gift Card</h4><div class="amt-grid"><button type="button" class="amt-btn active">$25</button><button type="button" class="amt-btn">$50</button><button type="button" class="amt-btn">$100</button></div><input type="email" placeholder="Recipient's Email" required><textarea placeholder="Personal message (optional)" rows="2"></textarea><button type="submit" class="buy-gift-btn">Purchase Gift Card</button></form>

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

.gift-card-form { width: 210px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.gift-card-form h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #0f172a; }
.amt-grid { display: flex; gap: 6px; margin-bottom: 10px; }
.amt-btn { flex: 1; border: 1px solid #cbd5e1; background: #ffffff; border-radius: 6px; padding: 6px; font-size: 8px; font-weight: 800; color: #334155; cursor: pointer; }
.amt-btn.active { background: #0f172a; color: #ffffff; border-color: #0f172a; }
.gift-card-form input, .gift-card-form textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; font-size: 8px; outline: none; margin-bottom: 6px; box-sizing: border-box; font-family: inherit; }
.gift-card-form textarea { resize: none; }
.buy-gift-btn { width: 100%; background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; margin-top: 2px; }