Botón de descarga

Abrir en el editor Publica tu código

Recomendado

18 September 2024

Formulario de inicio de sesión de Glowing Light

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

Botón de descarga

Recomendado

Botón de inicio de sesión

Juego de tres en raya

Formulario de inicio de sesión de Glowing Light

HTML

CSS

JS

Recomendado

Botón de inicio de sesión

Juego de tres en raya

Formulario de inicio de sesión de Glowing Light

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS