WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón de descarga
1181
AmirAliAkrami
Abrir en el editor
Publica tu código
Recomendado
18 September 2024
Botón de inicio de sesión
30 August 2024
Juego de tres en raya
9 September 2024
Formulario de inicio de sesión de Glowing Light
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; }