3 Fancy Glass Buttons You Can Build in 60 Seconds | Amit Tutorial #shorts

Welcome to Amit Tutorial! In this quick one-minute tutorial you’ll learn how to create premium glassmorphism buttons with glow, depth, shine sweep, and a realistic press animation — using only HTML & CSS. These buttons look like high-end UI components and are perfect for landing pages, hero sections, app UIs, and viral Shorts. ⭐ What You’ll Learn ✔ How to build glass buttons with backdrop-filter ✔ How to add cinematic glow & depth with box-shadow ✔ How to create a light sweep reflection using ::after ✔ How to add a natural press animation (no JS) ✔ Tiny pro tips to make buttons feel premium 📌 Why Use These Buttons – Premium look for portfolios & landing pages – Lightweight (no JavaScript) – Perfect for modern UI kits in 2025 – Great for Shorts/Reels & thumbnails 🔧 Files HTML + CSS — copy the SAFE CODE block below into index.html and style.css. 👉 More tutorials & downloads: https://www.amittutorial.com 👍 Like | 💬 Comment “NEXT” | 🔔 Subscribe for daily 1-minute UI projects! 🔰 SAFE CODE (NO ANGLE BRACKETS) Use this copy-safe block inside your YouTube description. Replace filenames when saving locally. SAFE HTML !DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title Premium Glass Buttons - Amit Tutorial /title link rel="stylesheet" href="style.css" / /head body div class="btn-box" button class="glass-btn" Get Started /button button class="glass-btn" Subscribe /button button class="glass-btn" Contact Us /button /div /body /html SAFE CSS *{margin:0;padding:0;box-sizing:border-box;} body{ height:100vh; background:linear-gradient(135deg,#0a0f1f,#151a29); display:flex; justify-content:center; align-items:center; font-family:Poppins, sans-serif; } .btn-box{display:flex;flex-direction:column;gap:20px;} .glass-btn{ padding:14px 32px;font-size:18px;border:none;border-radius:14px;color:#fff;cursor:pointer; background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15); box-shadow:inset 0 0 12px rgba(255,255,255,0.1),0 10px 25px rgba(0,0,0,0.4); position:relative;overflow:hidden;transition:0.25s ease; } .glass-btn:hover{ box-shadow:inset 0 0 14px rgba(255,255,255,0.15),0 12px 30px rgba(0,200,255,0.3); transform:translateY(-2px); } .glass-btn::after{ content:"";position:absolute;top:0;left:-120%;width:120%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent); transform:skewX(-20deg);transition:0.6s; } .glass-btn:hover::after{left:120%;} .glass-btn:active{transform:scale(0.95);box-shadow:inset 0 0 18px rgba(255,255,255,0.2),0 8px 1