Pulsante di download

1344 AmirAliAkrami

Apri nell'Editor Video Pubblica il Tuo Codice

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

CSS

* {
	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

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;
}

Consigliato

Pulsante HTML con effetto hover (WEBLEB)

Un codice di mematixd3162

Modello HTML della pagina di accesso Liquid Drop

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS