Bouton Supprimer

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 January 2025

Animation de bouton de commande

8 May 2025

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>

<button id="delete" class="del-btn" type="button" aria-label="Delete">
	<svg class="del-btn__icon" viewBox="0 0 48 48" width="48px" height="48px" aria-hidden="true">
		<clipPath id="can-clip">
			<rect class="del-btn__icon-can-fill" x="5" y="24" width="14" height="11" />
		</clipPath>
		<g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(12,12)">
			<g class="del-btn__icon-lid">
				<polyline points="9,5 9,1 15,1 15,5" />
				<polyline points="4,5 20,5" />
			</g>
			<g class="del-btn__icon-can">
				<g stroke-width="0">
					<polyline id="can-fill" points="6,10 7,23 17,23 18,10" />
					<use clip-path="url(#can-clip)" href="#can-fill" fill="#fff" />
				</g>
				<polyline points="6,10 7,23 17,23 18,10" />
			</g>
		</g>
	</svg>
	<span class="del-btn__letters" aria-hidden="true" data-anim>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">D</span>
		</span>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">e</span>
		</span>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">l</span>
		</span>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">e</span>
		</span>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">t</span>
		</span>
		<span class="del-btn__letter-box">
			<span class="del-btn__letter">e</span>
		</span>
	</span>
</button>

  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--danger: hsl(3,90%,45%);
	--danger-down: hsl(3,90%,65%);
	--white: hsl(0,0%,100%);
	--trans-dur: 0.3s;
	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (2560 - 320));
}
body,
button {
	font: 1em/1.5 "DM Sans", sans-serif;
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
/*Andev Web*/
.del-btn {
	background-color: var(--danger);
	border-radius: 0.2em;
	color: var(--white);
	cursor: pointer;
	display: flex;
	align-items: center;
	margin: auto;
	outline: transparent;
	padding: 0.75em 1.5em;
	-webkit-tap-highlight-color: #0000;
	transition: background-color var(--trans-dur);
}
.del-btn:not(:disabled):focus-visible,
.del-btn:not(:disabled):hover {
	background-color: var(--danger-down);
}
.del-btn__icon {
	display: block;
	margin: -0.75em 0 -0.75em -0.75em;
	pointer-events: none;
	width: 3em;
	height: 3em;
}
.del-btn__icon-lid {
	transform-origin: 12px 5px;
}
.del-btn__icon-can {
	transform-origin: 12px 18px;
}
.del-btn__letters {
	display: flex;
}
.del-btn__letter,
.del-btn__letter-box {
	display: inline-block;
}
.del-btn[data-running="false"] .del-btn__letters {
	animation: fadeIn 0.3s cubic-bezier(0.77,0,0.18,1) forwards;
}
.del-btn[data-running="true"] .del-btn__icon-lid,
.del-btn[data-running="true"] .del-btn__icon-can,
.del-btn[data-running="true"] .del-btn__icon-can-fill,
.del-btn[data-running="true"] .del-btn__letter,
.del-btn[data-running="true"] .del-btn__letter-box {
	animation: trashLid 2s cubic-bezier(0.77,0,0.18,1) forwards;
}
.del-btn[data-running="true"] .del-btn__icon-can {
	animation-name: trashCan;
}
.del-btn[data-running="true"] .del-btn__icon-can-fill {
	animation-name: trashCanFill;
}
.del-btn[data-running="true"] .del-btn__letter-box {
	animation-name: letterDrop;
	animation-timing-function: cubic-bezier(0.77,0,1,1);
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(1) .del-btn__letter {
	animation-name: letter1;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(2),
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(2) .del-btn__letter {
	animation-delay: 0.04s;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(2) .del-btn__letter {
	animation-name: letter2;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(3),
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(3) .del-btn__letter {
	animation-delay: 0.08s;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(3) .del-btn__letter {
	animation-name: letter3;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(4),
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(4) .del-btn__letter {
	animation-delay: 0.12s;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(4) .del-btn__letter {
	animation-name: letter4;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(5),
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(5) .del-btn__letter {
	animation-delay: 0.16s;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(5) .del-btn__letter {
	animation-name: letter5;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(6),
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(6) .del-btn__letter {
	animation-delay: 0.2s;
}
.del-btn[data-running="true"] .del-btn__letter-box:nth-child(6) .del-btn__letter {
	animation-name: letter6;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
}

/* Animations */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes trashLid {
	from,
	86%,
	to {
		transform: translate(0,0) rotate(0);
	}
	33.33%,
	46% {
		animation-timing-function: cubic-bezier(0.77,0,1,1);
		transform: translate(-2px,-4px) rotate(-40deg);
	}
	54%,
	70% {
		animation-timing-function: linear;
		transform: translate(0,0) rotate(0);
	}
	62% {
		animation-timing-function: linear;
		transform: translate(0,-2px) rotate(9deg);
	}
	78% {
		animation-timing-function: cubic-bezier(0,0,0.18,1);
		transform: translate(0,-1px) rotate(-6deg);
	}
}
@keyframes trashCan {
	from,
	86%,
	to {
		transform: translate(0,0) rotate(0);
	}
	33.33%,
	46% {
		animation-timing-function: cubic-bezier(0.77,0,1,1);
		transform: translate(-8px,3px) rotate(40deg);
	}
	54%,
	70% {
		animation-timing-function: linear;
		transform: translate(0,0) rotate(0);
	}
	62% {
		animation-timing-function: linear;
		transform: translate(-1px,0) rotate(-4deg);
	}
	78% {
		animation-timing-function: cubic-bezier(0,0,0.18,1);
		transform: translate(0,0) rotate(2deg);
	}
}
@keyframes trashCanFill {
	from,
	25%,
	to {
		y: 24px;
	}
	66.67%,
	83.33% {
		y: 12px;
	}
}
@keyframes letterDrop {
	from,
	33.33% {
		transform: translate(0,0);
	}
	41.67%,
	to {
		transform: translate(0,0.625em);
	}
}
@keyframes letter1 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-2.375em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-2.375em,0) rotate(-135deg) scale(0);
	}
}
@keyframes letter2 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3em,0) rotate(-135deg) scale(0);
	}
}
@keyframes letter3 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3.375em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3.375em,0) rotate(-135deg) scale(0);
	}
}
@keyframes letter4 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-3.75em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-3.75em,0) rotate(-135deg) scale(0);
	}
}
@keyframes letter5 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-4.125em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-4.125em,0) rotate(-135deg) scale(0);
	}
}
@keyframes letter6 {
	from {
		transform: translate(0,0) rotate(0);
	}
	33.33% {
		transform: translate(0.75em,0) rotate(30deg) scale(1);
	}
	41.67% {
		transform: translate(-4.75em,0) rotate(-135deg) scale(0.75);
	}
	46%,
	to {
		transform: translate(-4.75em,0) rotate(-135deg) scale(0);
	}
}

Bouton Supprimer

Recommandé

BOUTON

Animation de bouton de commande

bouton de numérisation

HTML

CSS

JS

Recommandé

BOUTON

Animation de bouton de commande

bouton de numérisation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS