Bouton Supprimer

Ouvrir dans l'éditeur Publiez votre code

Recommandé

9 December 2024

<!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 de survol

bouton survolant

Bouton animé au survol

HTML

CSS

JS

Recommandé

Bouton de survol

bouton survolant

Bouton animé au survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS