WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Pulsante di download
1344
AmirAliAkrami
Apri nell'Editor
Video
Pubblica il Tuo Codice
0
Consigliato
18 October 2025
Pulsante HTML con effetto hover (WEBLEB)
16 January 2025
Un codice di mematixd3162
31 July 2025
Modello HTML della pagina di accesso Liquid Drop
HTML
Copy
دانلود
CSS
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --dur: 3s; --arrowA: polygon(33% 0%,67% 0%,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%); --arrowB: polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%); font-size: calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320)); } body, button { display: flex; font: 1em/1.5 Hind, sans-serif; } body { background: #0e1538; height: 100vh; overflow: hidden; } button { background: #25f47f; filter: drop-shadow(0 0 20px #000); border-radius: 3em; color: #fff; cursor: pointer; display: flex; margin: auto; padding: 0.5em 1em; position: relative; transition: background 0.15s linear; width: 10.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } button:focus { outline: transparent; } button::-moz-focus-inner { border: 0; } button:not(:disabled):focus, button:not(:disabled):hover { background: #0bdabb; } button:not(:disabled):active { transform: translateY(2px); } button:disabled { cursor: not-allowed; } button span, button:before, button:after { display: inline-block; pointer-events: none; } button:before, button:after { border-radius: 0.25em; opacity: 0; top: 1em; left: 1.3em; height: 0.5em; transform-origin: 0.25em 50%; z-index: 2; } button:before { transform: rotate(-180deg); width: 0.8em; } button:after { width: 1.2em; } button:before, button:after, .down:before, .down:after { content: ""; display: block; position: absolute; } button:before, button:after, .down:before { background: currentColor; } button span + span { margin: auto; } .down { margin-right: 0.5em; position: relative; width: 1.5em; height: 1.5em; } .down:before { clip-path: var(--arrowA); -webkit-clip-path: var(--arrowA); top: 0; left: calc(50% - 0.55em); transform-origin: 50% 100%; width: 1.1em; height: 1em; z-index: 1; } .down:after { background-image: linear-gradient(#08de08,#61da0b); background-position: -1.5em 0; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0.25em 0 0 inset, -0.25em 0 0 inset, 0 -0.25em 0 inset; bottom: 0; width: 100%; height: 0.5em; } .dl-working:before { animation: checkOutA var(--dur) linear forwards; } .dl-working:after { animation: checkOutB var(--dur) linear forwards; } .dl-working .down { animation: impact var(--dur) linear forwards; } .dl-working .down:before { animation: arrowToBar var(--dur) linear forwards; } .dl-working .down:after { animation: trayToBar var(--dur) linear forwards; } @keyframes impact { from, 15% { transform: translateY(0); } 17.5% { transform: translateY(0.25em); } 20%, to { transform: translateY(0); } } @keyframes arrowToBar { from { clip-path: var(--arrowA); -webkit-clip-path: var(--arrowA); } 10% { clip-path: var(--arrowB); -webkit-clip-path: var(--arrowB); transform: translateY(0); } 15% { clip-path: var(--arrowB); -webkit-clip-path: var(--arrowB); transform: translateY(0.625em); } 30% { clip-path: var(--arrowB); -webkit-clip-path: var(--arrowB); opacity: 1; transform: translateY(0.125em); } 35%, to { clip-path: var(--arrowB); -webkit-clip-path: var(--arrowB); opacity: 0; transform: translateY(0.125em); } } @keyframes trayToBar { from, 15% { background-color: transparent; border-radius: 0; box-shadow: 0.25em 0 0 inset, -0.25em 0 0 inset, 0 -0.25em 0 inset; transform: translateY(0); } 15.1% { background-color: currentColor; border-radius: 0; box-shadow: 0 0 0 inset, 0 0 0 inset, 0 0 0 0.1em inset; transform: translateY(0); } 30% { background-color: currentColor; background-position: -1.5em 0; border-radius: 0.25em; box-shadow: 0 0 0 inset, 0 0 0 inset, 0 0 0 0.1em inset; transform: translateY(-0.5em); } 90% { background-color: currentColor; background-position: 0 0; border-radius: 0.25em; box-shadow: 0 0 0 inset, 0 0 0 inset, 0 0 0 0.1em inset; opacity: 1; transform: translateY(-0.5em); } 90.1%, to { background-color: currentColor; background-position: 0 0; border-radius: 0.25em; box-shadow: 0 0 0 inset, 0 0 0 inset, 0 0 0 0.1em inset; opacity: 0; transform: translateY(-0.5em); } } @keyframes checkOutA { from, 90% { opacity: 0; transform: translate(0,0) rotate(-180deg); } 90.1% { opacity: 1; width: 0.8em; transform: translate(0,0) rotate(-180deg); } 92.5% { opacity: 1; width: 1em; transform: translate(0,0.5em) rotate(-120deg); } 95%, to { opacity: 1; width: 1em; transform: translate(0,0.375em) rotate(-135deg); } } @keyframes checkOutB { from, 90% { opacity: 0; transform: translate(0,0) rotate(0); } 90.1% { opacity: 1; width: 1.2em; transform: translate(0,0) rotate(0); } 92.5% { opacity: 1; width: 1.6em; transform: translate(0,0.5em) rotate(-60deg); } 95%, to { opacity: 1; width: 1.6em; transform: translate(0,0.375em) rotate(-45deg); } } @media (prefers-color-scheme: dark) { body { background: #2e3138; } }
JS
Copy
document.addEventListener("DOMContentLoaded", function () { this.addEventListener("click", e => { let tar = e.target; if (tar.hasAttribute("data-dl")) { let dlClass = "dl-working"; if (!tar.classList.contains(dlClass)) { let lastSpan = tar.querySelector("span:last-child"), lastSpanText = lastSpan.textContent, timeout = getMSFromProperty("--dur", ":root"); tar.classList.add(dlClass); lastSpan.textContent = "درحال دانلود"; tar.disabled = true; setTimeout(() => { lastSpan.textContent = "پایان"; }, timeout * 0.9); setTimeout(() => { tar.classList.remove(dlClass); lastSpan.textContent = lastSpanText; tar.disabled = false; }, timeout + 1e3); } } }); }); function getMSFromProperty(property, selector) { let cs = window.getComputedStyle(document.querySelector(selector)), transDur = cs.getPropertyValue(property), msLabelPos = transDur.indexOf("ms"), sLabelPos = transDur.indexOf("s"); if (msLabelPos > -1) return transDur.substr(0, msLabelPos); else if (sLabelPos > -1) return transDur.substr(0, sLabelPos) * 1e3; }