/* ========================================================== HASHVIX BUTTON SYSTEM ========================================================== */ /* ========================================================== BASE BUTTON ========================================================== */ .hx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 28px; border-radius:18px; font-size:15px; font-weight:700; font-family:var(--hx-font); cursor:pointer; border:none; transition:var(--hx-normal); position:relative; overflow:hidden; user-select:none; white-space:nowrap; text-decoration:none; } /* ========================================================== BUTTON ICON ========================================================== */ .hx-btn i{ font-size:18px; } /* ========================================================== PRIMARY ========================================================== */ .hx-btn-primary{ background:var(--hx-gradient-primary); color:white; box-shadow: 0 15px 40px rgba(79,140,255,.28); } .hx-btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 25px 55px rgba(79,140,255,.45); } /* ========================================================== SECONDARY ========================================================== */ .hx-btn-secondary{ background:var(--hx-gradient-secondary); color:white; box-shadow: 0 15px 35px rgba(0,212,255,.25); } .hx-btn-secondary:hover{ transform:translateY(-4px); } /* ========================================================== GLASS ========================================================== */ .hx-btn-glass{ background:rgba(255,255,255,.05); backdrop-filter:blur(25px); border:1px solid rgba(255,255,255,.08); color:white; } .hx-btn-glass:hover{ background:rgba(255,255,255,.09); transform:translateY(-3px); } /* ========================================================== OUTLINE ========================================================== */ .hx-btn-outline{ border:2px solid var(--hx-primary); color:var(--hx-primary); background:transparent; } .hx-btn-outline:hover{ background:var(--hx-primary); color:white; } /* ========================================================== SUCCESS ========================================================== */ .hx-btn-success{ background:var(--hx-success); color:white; } .hx-btn-success:hover{ filter:brightness(1.08); } /* ========================================================== DANGER ========================================================== */ .hx-btn-danger{ background:var(--hx-danger); color:white; } .hx-btn-danger:hover{ filter:brightness(1.08); } /* ========================================================== LIGHT ========================================================== */ .hx-btn-light{ background:white; color:#111; } .hx-btn-light:hover{ transform:translateY(-3px); } /* ========================================================== DARK ========================================================== */ .hx-btn-dark{ background:#111827; color:white; border:1px solid rgba(255,255,255,.06); } .hx-btn-dark:hover{ background:#182131; } /* ========================================================== FULL WIDTH ========================================================== */ .hx-btn-block{ width:100%; } /* ========================================================== SMALL ========================================================== */ .hx-btn-sm{ padding:10px 18px; font-size:13px; } /* ========================================================== LARGE ========================================================== */ .hx-btn-lg{ padding:18px 36px; font-size:17px; } /* ========================================================== ROUND ========================================================== */ .hx-btn-round{ border-radius:999px; } /* ========================================================== ICON BUTTON ========================================================== */ .hx-btn-icon{ width:52px; height:52px; padding:0; display:flex; align-items:center; justify-content:center; } .hx-btn-icon i{ font-size:22px; } /* ========================================================== PLAY BUTTON ========================================================== */ .hx-btn-play{ width:70px; height:70px; border-radius:50%; background:var(--hx-gradient-primary); display:flex; align-items:center; justify-content:center; color:white; box-shadow: 0 20px 60px rgba(79,140,255,.35); } .hx-btn-play i{ font-size:28px; } .hx-btn-play:hover{ transform:scale(1.08); } /* ========================================================== GENERATE BUTTON ========================================================== */ .hx-btn-generate{ background: linear-gradient( 135deg, #4F8CFF, #00D4FF, #8B5CF6); background-size:300%; animation:hxGradient 6s linear infinite; color:white; font-size:17px; padding:18px 40px; box-shadow: 0 20px 60px rgba(79,140,255,.35); } /* ========================================================== FOLLOW BUTTON ========================================================== */ .hx-btn-follow{ background:var(--hx-gradient-primary); color:#fff; } .hx-btn-follow.following{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#fff; } .hx-btn-follow.following:hover{ background:#ef4444; border-color:#ef4444; } /* ========================================================== LIKE BUTTON ========================================================== */ .hx-btn-like{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); color:#fff; } .hx-btn-like:hover{ transform:scale(1.08); } .hx-btn-like.active{ background:#ff3b6b; border-color:#ff3b6b; color:white; animation:hxPop .35s ease; } /* ========================================================== RIPPLE ========================================================== */ .hx-btn{ position:relative; overflow:hidden; } .hx-btn::after{ content:""; position:absolute; width:0; height:0; left:50%; top:50%; background:rgba(255,255,255,.25); border-radius:50%; transform:translate(-50%,-50%); transition:.55s; } .hx-btn:active::after{ width:280px; height:280px; opacity:0; } /* ========================================================== SHINE ========================================================== */ .hx-btn-primary::before, .hx-btn-secondary::before{ content:""; position:absolute; top:0; left:-120%; width:70%; height:100%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent ); transform:skewX(-25deg); transition:.8s; } .hx-btn-primary:hover::before, .hx-btn-secondary:hover::before{ left:150%; } /* ========================================================== LOADING ========================================================== */ .hx-btn-loading{ pointer-events:none; opacity:.8; } .hx-btn-loading::after{ content:""; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:white; border-radius:50%; margin-left:10px; animation:hxSpin .8s linear infinite; } /* ========================================================== SOCIAL BUTTONS ========================================================== */ .hx-btn-instagram{ background:linear-gradient( 135deg, #f58529, #dd2a7b, #8134af, #515bd4); color:white; } .hx-btn-youtube{ background:#ff0000; color:white; } .hx-btn-spotify{ background:#1DB954; color:white; } .hx-btn-tiktok{ background:#000; border:1px solid rgba(255,255,255,.08); color:white; } /* ========================================================== GHOST ========================================================== */ .hx-btn-ghost{ background:transparent; color:var(--hx-text); } .hx-btn-ghost:hover{ background:rgba(255,255,255,.05); } /* ========================================================== DISABLED ========================================================== */ .hx-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none!important; } /* ========================================================== GROUP ========================================================== */ .hx-btn-group{ display:flex; gap:14px; flex-wrap:wrap; } /* ========================================================== ICON POSITION ========================================================== */ .hx-btn-right i{ order:2; } .hx-btn-left i{ order:0; } /* ========================================================== ANIMATIONS ========================================================== */ @keyframes hxSpin{ to{ transform:rotate(360deg); } } @keyframes hxPop{ 0%{ transform:scale(.8); } 50%{ transform:scale(1.15); } 100%{ transform:scale(1); } } @keyframes hxGradient{ 0%{ background-position:0%; } 100%{ background-position:300%; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:768px){ .hx-btn{ width:100%; justify-content:center; } .hx-btn-group{ flex-direction:column; } .hx-btn-icon{ width:50px; height:50px; } .hx-btn-play{ width:60px; height:60px; } }