Delete button

Open In Editor Publish Your Code

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

Delete button

Recommended

Buttons Gradient Hover

On Hover Animated Button

CSS Radio Button Navigation Menu

HTML

CSS

JS

Recommended

Buttons Gradient Hover

On Hover Animated Button

CSS Radio Button Navigation Menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS