The Power of Pure CSS - No JavaScript Needed

.wrapper {
  position: relative;
  perspective: 40em;
  display: grid;
  transform-style: preserve-3d;
}

.card {
  grid-area: 1 / 1;
  height: 200px;
  width: 400px;
  transform: translateX(10px) rotateY(25deg) rotateX(10deg);
  background: rgba(249, 198, 26, 0.88);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  color: #000;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 900;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}

h1 {
  font-size: 60px;
  font-weight: 900;
}

.card .enclosed {
  background: #000;
  line-height: 1;
  color: rgba(249, 198, 26, 1);
  padding: 0 5px;
  display: inline-block;
  transform: translate(-1px, 1px) scale(0.75);
  transform-origin: right center;
}

.wrapper:before {
  --bw: 9px;
  grid-area: 1 / 1;
  content: '';
  backface-visibility: hidden;
  height: 100%;
  width: 100%;
  margin-top: calc(-1 * var(--bw));
  margin-left: calc(-1 * var(--bw));
  background: transparent;
  transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
  pointer-events: none;
  border: var(--bw) solid #000;
  box-sizing: content-box;
}

.wrapper:hover > div,
.wrapper:hover:before {
  transform: none;
}

.wrapper > div,
.wrapper:before {
  will-change: transform;
  transition: .3s transform cubic-bezier(.25,.46,.45,1);
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background:
    linear-gradient(to bottom right, #3C4BBD 15%, transparent),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center / 15px 15px,
    linear-gradient(to bottom right, #3C4BBD, #57ADD8);
}

23

3D Cutout Card Hover effect

By: pixeldev

<div class="notification">
			
			<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="32" aria-hidden="true">
				<path class="icon-off" stroke-linecap="round" stroke-linejoin="round" d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53" />
				<path class="icon-on" stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
			</svg>
			
			<label for="switch">
				<div class="label-text">
					<span>
						Notifications
						<span class="off">Off</span>
						<span class="on">On</span>
					</span>
					<span class="msg-off">Enjoy your day.</span>
					<span class="msg-on">Spam on the way.</span>
				</div>
			</label>
			
			<input type="checkbox" id="switch">
			
		</div>

@layer notification {

.notification {
		display: grid;
		grid-template-columns: 32px 10rem 4rem;
		align-items: center;
		gap: 1rem;
	}

.label-text > span:first-of-type {
		display: block;
		font-size: .875rem;
		font-weight: 600;
	}

:where(.msg-on, .msg-off) {
		font-size: .75rem;
		color: var(--text-muted);
	}

:where(.on, .msg-on, .icon-on) {
		display: none;
	}

.notification:has(input:checked) :is(.on, .msg-on, .icon-on) {
		display: inline-block;
	}

.notification:has(input:checked) :is(.off, .msg-off, .icon-off) {
		display: none;
	}

.notification:has(input:checked) svg {
		animation: buzz .25s cubic-bezier(.9, 0, .1, 1);
	}

@keyframes buzz {
		0%, 100% { transform: translateX(0%) }
		20% { transform: translateX(-5%) }
		40% { transform: translateX(5%) }
		60% { transform: translateX(-5%) }
		80% { transform: translateX(5%) }
	}

}

@layer notification.demo {
	:root {
		--bg: #fff;
		--bg-muted: #f8f8f8;
		--text: #555;
		--text-muted: #888;
		--focus: #ff5449;
	}

html {
		font-family: system-ui, sans-serif;
		font-size: 100%;
		block-size: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		text-rendering: optimizeSpeed;
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		box-sizing: border-box;
	}

*, *::before, *::after {
		margin: 0;
		padding: 0;
		box-sizing: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: 1;
	}

:where(svg) {
		max-block-size: 100%;
		pointer-events: none;
	}

:where(body) {
		min-block-size: 100dvh;
		font-weight: 400;
		display: grid;
		place-content: center;
		padding: 5vmin;
		background-color: var(--bg-muted);
		color: var(--text);
	}

input[type="checkbox"] {
		-webkit-appearance: none;
		appearance: none;
		font: inherit;
		font-size: inherit;
		color: inherit;
		letter-spacing: inherit;
		inline-size: 3.5rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: .25rem;
		border: 1px solid currentColor;
		border-radius: 1rem;
		transition: 120ms background-color ease-in-out;
	}

input[type="checkbox"]:focus-visible {
			outline: 2px solid var(--focus);
			outline-offset: 2px;
	}

input[type="checkbox"]::before {
			content: "";
			display: block;
			clip-path: revert;
			inline-size: 1.25rem;
			block-size: 1.25rem;
			background-color: currentColor;
			border-radius: 1rem;
			transform: translateX(0);
			transition: 120ms transform ease-in-out;
	}
	input[type="checkbox"]:checked {
			background-color: currentColor;
	}
	input[type="checkbox"]:checked::before {
			transform: translateX(1.65rem);
			background-color: white;
	}
}

23

Notification Toggle

By: pixeldev

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Added box-sizing for better layout control */
	}

body {
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* Full height to center content vertically */
	}

#center {
	position: relative;
	}

ul {
	list-style: none;
	display: inline-block;
	}

ul li {
	width: 25px;
	height: 25px;
	margin: 8px 0;
	opacity: 0; /* Start invisible for animation */
	transform: scale(0); /* Start small for animation */
	animation: pop 0.5s forwards; /* Animation to pop into view */
	}

/* Animation for popping effect */
@keyframes pop {
	0% {
		opacity: 0;
		transform: scale(0);
	}	
	50% {
		opacity: 0.5;
		transform: scale(1.2); /* Slightly larger during animation */
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Delay animations based on position */
ul li.one { 
	background: #0080FF; 
	animation-delay: 0.2s; 
}
ul li.two { 
	background: #0EA7A5; 
	animation-delay: 0.3s; 
}
ul li.three { 
	background: #50C878; 
	animation-delay: 0.4s; 
}
ul li.four { 
	background: #FFD700; 
	animation-delay: 0.5s; 
}
ul li.five { 
	background: #FA7A35; 
	animation-delay: 0.6s; 
}
ul li.six { 
  background: #E24666; 
	animation-delay: 0.7s; 
}
ul li.seven { 
	background: #B53389; 
	animation-delay: 0.8s; 
}
ul li.eight { 
	background: #708090; 
	animation-delay: 0.9s; 
}
ul li.nine { 
	background: #918E85; 
	animation-delay: 0.95s; 
}

22

Pixel Heart

By: pixeldev

<div class="glitch-input-wrapper">
  <div class="input-container">
    <input
      type="text"
      id="holo-input"
      class="holo-input"
      placeholder=""
      required=""/>
    <label for="holo-input" class="input-label" data-text="ACCESS_CODE">ACCESS_CODE</label>

body {
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.glitch-input-wrapper {
  --bg-color: #0d0d0d;
  --primary-color: #00f2ea;
  --secondary-color: #a855f7;
  --text-color: #e5e5e5;
  --font-family: "Fira Code", Consolas, "Courier New", Courier, monospace;
  --glitch-anim-duration: 0.4s;

display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 3rem;
}

/* --- Container  --- */
.input-container {
  position: relative;
  width: 19rem;
}

/* --- Input --- */
.holo-input {
  width: 100%;
  height: 3.5rem;
  background: rgba(13, 13, 13, 0.7);
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  padding: 0 1rem;
  color: var(--primary-color);
  font-family: inherit;
  font-size: 1.1rem;
  caret-color: var(--primary-color);
  z-index: 10;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* --- Floating Label --- */
.input-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--text-color);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 11;
}
.holo-input:focus + .input-label,
.holo-input:not(:placeholder-shown) + .input-label {
  top: -1.5rem;
  left: 0;
  font-size: 0.8rem;
  opacity: 1;
  color: var(--primary-color);
}

.holo-input:focus + .input-label::before,
.holo-input:focus + .input-label::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #212121;
}
.holo-input:focus + .input-label::before {
  color: var(--secondary-color);
  animation: glitch-label var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.holo-input:focus + .input-label::after {
  color: var(--primary-color);
  animation: glitch-label var(--glitch-anim-duration)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;
}

/* --- Decorative Layers --- */
.input-border,
.input-scanline,
.input-glow,
.input-corners {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.input-border {
  border: 1px solid rgba(0, 242, 234, 0.2);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--primary-color);
  transition: all 0.3s ease;
  opacity: 0.5;
}
.corner-tl {
  top: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-bottom: none;
}
.corner-tr {
  top: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-bottom: none;
}
.corner-bl {
  bottom: -0.3rem;
  left: -0.3rem;
  border-right: none;
  border-top: none;
}
.corner-br {
  bottom: -0.3rem;
  right: -0.3rem;
  border-left: none;
  border-top: none;
}

.input-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 242, 234, 0.2) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.input-scanline {
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 242, 234, 0.1) 48%,
    rgba(0, 242, 234, 0.3) 50%,
    rgba(0, 242, 234, 0.1) 52%,
    transparent 100%
  );
  opacity: 0;
}

/* --- Data Visualization --- */
.input-data-stream {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 0.3rem;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}
.stream-bar {
  flex-grow: 1;
  background-color: var(--primary-color);
  transition:
    transform 0.2s,
    opacity 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}

.holo-input:focus {
  border-color: transparent;
}
.holo-input:focus ~ .input-border {
  opacity: 1;
  border-color: rgba(0, 242, 234, 0.5);
}
.holo-input:focus ~ .input-corners .corner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 3px;
  opacity: 1;
}
.holo-input:focus ~ .input-glow {
  opacity: 1;
}
.holo-input:focus ~ .input-scanline {
  animation: scan-vertical 4s linear infinite;
}
.holo-input:focus ~ .input-data-stream {
  opacity: 1;
}
.holo-input:focus ~ .input-data-stream .stream-bar {
  animation: data-pulse 2s infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

/* --- Keyframes --- */
@keyframes glitch-label {
  0% {
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
  20% {
    transform: translate(-0.2rem, 0.1rem);
    clip-path: inset(50% 0 20% 0);
  }
  40% {
    transform: translate(0.1rem, -0.1rem);
    clip-path: inset(20% 0 60% 0);
  }
  60% {
    transform: translate(-0.15rem, 0.1rem);
    clip-path: inset(80% 0 5% 0);
  }
  80% {
    transform: translate(0.15rem, -0.15rem);
    clip-path: inset(30% 0 45% 0);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scan-vertical {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  25% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes data-pulse {
  0%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.3;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.8;
  }
}

22

CyberPunk Glitch Input

By: pixeldev

22

Cool 3D Hover Effect

By: pixeldev

div {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
}

.btn-container {
  background-color: transparent;
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid;
  border-color: #ffff #ccc4;
  height: fit-content;
  padding: 0.9em;
  border-radius: 21px;

&::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: #fafafa80;
    border-radius: inherit;
  }

&::before {
    content: "";
    display: block;
    position: absolute;
    inset: -0.15em;
    background: conic-gradient(
      from var(--rotation),
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      purple
    );
    border-radius: inherit;
    filter: blur(1em) opacity(0.5);
    z-index: -1;
    animation: 2.5s linear infinite rotating;
  }

&:has(:active) {
    &::before {
      filter: blur(0.25em) opacity(0.5);
      transform: scalex(0.9) scaley(0.8);
    }
  }
}

button {
  background-image: linear-gradient(0deg, #323232, #444);
  color: #fff;
  font-family: "VT323", monospace;
  font-size: 50px;
  padding: 0.25em 0.5em;
  border-radius: 15px;
  border: 1px solid #fff2;
  cursor: pointer;
  box-shadow: 0 0.1em 0.15em #3338;
  z-index: 1;

& span {
    display: block;
    background-image: linear-gradient(0deg, #444, #323232);
    padding: 0.25em 0.5em;
    border-radius: 50px;
    border: 1px solid #3338;
  }

&:active {
    transform: scalex(0.95) scaley(0.9);
  }
}

@keyframes rotating {
  from {
    --rotation: 0deg;
  }
  to {
    --rotation: 360deg;
  }
}

22

Stylish Add to cart Button

By: pixeldev

.glass-grid {
        font-size: 5vmin;
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(4, 1fr);
    }
    .glass-effect {
        background-color: oklch(1 0 0 / 10%);
        backdrop-filter: blur(0.25em) brightness(1.2) saturate(1.2);
        min-height: 2.5em;
        min-width: 2.5em;
        border-radius: 2em;
        box-shadow:
          /* direct "classic" shadow */
          0 0.1em 0.25em 0 oklch(0 0 0 / 15%), 
          /* ambient shadow */
          0 0 1em 0 oklch(0 0 0 / 12.5%),      
          /* top left corner highlight */
          inset 0.075em 0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* bottom right corner highlight */
          inset -0.075em -0.075em 0.05em 0 oklch(1 0 0 / 40%), 
          /* inside shadow, occlusion arround the corners */
          inset 0 0 3em .5em oklch(0 0 0 / 20%);

transform: scale(1);
        transition: transform .1s ease-out, background-color .15s ease-out;
        &:hover {
            transform: scale(1.02);
            background-color: oklch(1 0 0 / 15%);
        }
    }
    
    .glass-1-1 {

}
    .glass-2-1 {
        grid-column: 2 span;
    }
    .glass-4-1 {
        grid-column: 4 span;
    }
    .glass-2-2 {
        grid-column: 2 span;
        grid-row: 2 span;
    }

body { padding: 0; margin: 0;}
    * {
        box-sizing: border-box;
    }
    main  {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
body {
  background-color: #dcded1;
  background-size: cover;
  background-position: 50% 50%;
}

21

Glass Effect Icons

By: pixeldev

:root {
  --gray: #e0e5ec;
  --size: 25vw;
  --scalingFactor: calc(100 / 25); /*related to size*/
}
  
body {
  background: var(--gray);
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
}
.dot, .trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: var(--size);
  width: var(--size);
  margin: 10px;
  background: var(--gray);
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.trigger {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.5);
  letter-spacing: 0.05em;
  cursor: pointer;
}
.trigger:before {
  content:'click me'
}
#trigger:checked + .trigger:before {
  content: 'reset'
}

#trigger:checked + .trigger + .dots > .dot {
  animation-name: wave;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.dot {
  opacity: 1;
  transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
}
.dot:nth-of-type(2) {
  z-index: 1;
  animation-delay: .5s;
}
.dot:nth-of-type(3) {
  z-index: 2;
  animation-delay: 1s;
}

@keyframes wave{
  0% {
    opacity: 1;
    transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
  }  
  100% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale3d(var(--scalingFactor),var(--scalingFactor),1);
  }
}

21

On Click Ripple Effect

By: pixeldev

body {
  background-image: linear-gradient(#fff,#bbb);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  width: 15rem;
  height: 30rem;
  transform: scale(.5); /* initial dimensions too big imho, quick dirty hack*/
}

.cake {
  position: absolute;
  bottom: 0;
}

.cake .lyr {
  width: 15rem;
  height: 6rem;
  background-color: currentColor;
  position: absolute;
  border-radius: 7.5rem / 1.5rem;
}

.cake .lyr-1 { color: #F1D4AF; bottom: 0;}
.cake .lyr-2 { color: #774F38; bottom: 3rem;}
.cake .lyr-3 { color: #E08E79; bottom: 6rem;
background-image: radial-gradient(ellipse 7.5rem 1.5rem at 7.5rem 1.5rem, gold, gold 5%, #E99788 100%, transparent);}

.candle {
  position: absolute;
  bottom: 10rem;
  left: 6.5rem;
  width: 2rem;
  height: 10rem;
  background-color: red;
  border-radius: 1rem / .5rem;
  background-image: repeating-linear-gradient(45deg, white, white 10%, transparent 10%, transparent 20%);
}

.candle::before {
  content: "";
  position: absolute;
  width: .5rem;
  height: 2rem;
  border-radius: .25rem / .15rem;
  background-color: black;
  top: -1.5rem;
  left: .75rem;
}

.candle::after {
  content: "";
  width: 2rem;
  height: 1rem;
  background-color: red;
  display: block;
  border-radius: 50%;
}

.flame {
  position: absolute;
  left: 6.5rem;
}

.wht { 
  color: white; animation: burn-wht 1.8s; 
  box-shadow: 0 0 1rem white;}
.ylw { 
  color: gold;  top: 1.8rem; animation: burn-ylw 1.6s; 
  box-shadow: 0 0 1rem gold; opacity: .9}
.orng { 
  color: orange; top: 3.6rem; animation: burn-orng 0.4s; 
  box-shadow: 0 0 1rem orange; opacity: .8}
.red { 
  color: crimson; top: 5.4rem; animation: burn-red 1s;
  opacity: .7;}

.smoke { 
  color: black; top: 8.8rem;
  box-shadow: 0 0 2rem black;
  background-color: currentColor;
  position: relative;
  border-color: currentColor;
  width: .25rem;
  height: .25rem;
  top: 7rem;
  animation-name: burn-smoke;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.smk-1 {animation-duration: .5s; animation-name: burn-smoke-rev; left: .5rem;}
.smk-2 {animation-duration: .6s; left: -.5rem;}
.smk-3 {animation-duration: .7s; animation-name: burn-smoke-rev; left: 1rem;}
.smk-4 {animation-duration: .8s; left: 1.5rem;}
.smk-5 {animation-duration: .9s; left: 2rem;}

.flm-part {
  background-color: currentColor;
  border-radius: 50%;
  position: relative;
  transform: rotate(60deg) skewX(0deg) scale(1);
  border-color: currentColor;
  width: 2rem;
  height: 2rem;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.flm-part.flipped {
  transform: rotate(120deg) skewX(0deg) scale(1);
}

.flm-part::before {
  content: "";
  position: absolute;
  border-radius: 0 0 0 100%;
  border-bottom-style: solid;
  border-bottom-color: inherit;
  height: .5rem;
  width: 2rem;
  left: -1rem;
  top: -.5rem;
  border-bottom-width: 2rem;
}

.flm-part.flipped::before {
  border-radius: 100% 0 0 0;
  border-bottom: 0 solid transparent;
  border-top-style: solid;
  border-top-color: inherit;
  border-top-width: 2rem;
  height: .5rem;
  width: 2rem;
  left: -1rem;
  top: 0;
}

@keyframes burn-wht {
  0% { transform: rotate(60deg) skewX(0deg) scale(1)}
  20% { transform: rotate(50deg) skewX(-3deg) scale(1.1)}
  40% { transform: rotate(60deg) skewX(0deg) scale(1)}
  60% { transform: rotate(70deg) skewX(3deg) scale(1.1)}
  100% {transform: rotate(60deg) skew(0deg) scale(1)}
}

@keyframes burn-ylw {
  0% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
  20% { transform: rotate(110deg) skewX(10deg) scale(1.5)}
  40% { transform: rotate(120deg) skewX(0deg) scale(1.4)}
  60% { transform: rotate(130deg) skewX(-10deg) scale(1.5)}
  100% {transform: rotate(120deg) skew(0deg) scale(1.4)}
}

@keyframes burn-orng {
  0% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
  20% { transform: rotate(60deg) skewX(-15deg) scale(1.7)}
  40% { transform: rotate(65deg) skewX(0deg) scale(1.6)}
  60% { transform: rotate(70deg) skewX(2deg) scale(1.7)}
  100% {transform: rotate(65deg) skew(0deg) scale(1.6)}
}

@keyframes burn-red {
  0% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
  20% { transform: rotate(118deg) skewX(5deg) scale(2)}
  40% { transform: rotate(120deg) skewX(0deg) scale(1.8)}
  60% { transform: rotate(122deg) skewX(-5deg) scale(2)}
  100% {transform: rotate(120deg) skew(0deg) scale(1.8)}
}

@keyframes burn-smoke {
  0% { transform: rotate(0deg) scale(1);  opacity: 1; }
  100% {transform: rotate(360deg) scale(4); opacity: 0; top: 0;}
}

@keyframes burn-smoke-rev {
  0% { transform: rotate(0deg) scale(1);  opacity: 1; }
  100% {transform: rotate(-360deg) scale(5); opacity: 0; top: 0;}
}

21

Birthday Cake Candle

By: pixeldev

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background-color: rgba(225, 225, 225, 1);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

button {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    border-radius: 999vw;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
        0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

button::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg,
            rgba(5, 5, 5, 0.5),
            transparent 20%,
            transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.25;
    mix-blend-mode: multiply;
}

button .button-outer {
    position: relative;
    z-index: 1;
    border-radius: inherit;
    transition: box-shadow 300ms ease;
    will-change: box-shadow;
    box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
        0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
        0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

button:hover .button-outer {
    box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
        0 0 0 0 rgba(5, 5, 5, 0.25);
}

.button-inner {
    --inset: 0.035em;
    position: relative;
    z-index: 1;
    border-radius: inherit;
    padding: 1em 1.5em;
    background-image: linear-gradient(135deg,
            rgba(230, 230, 230, 1),
            rgba(180, 180, 180, 1));
    transition: box-shadow 300ms ease, clip-path 250ms ease,
        background-image 250ms ease, transform 250ms ease;
    will-change: box-shadow, clip-path, background-image, transform;
    overflow: clip;
    clip-path: inset(0 0 0 0 round 999vw);
    box-shadow:
        /* 1 */
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        /* 2 */
        -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
        /* 3 */
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        /* 4 */
        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
        /* 5 */
        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
        /* 6 */
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        /* 7 */
        -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

button:hover .button-inner {
    clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 999vw);
    box-shadow:
        /* 1 */
        0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
        /* 2 */
        -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
        /* 3 */
        0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
        /* 4 */
        0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
        /* 5 */
        0 0 0 0 inset rgba(255, 255, 255, 1),
        /* 6 */
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        /* 7 */
        -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

button .button-inner span {
    position: relative;
    z-index: 4;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(135deg,
            rgba(25, 25, 25, 1),
            rgba(75, 75, 75, 1));
    -webkit-background-clip: text;
    background-clip: text;
    transition: transform 250ms ease;
    display: block;
    will-change: transform;
    text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button:hover .button-inner span {
    transform: scale(0.975);
}

button:active .button-inner {
    transform: scale(0.975);
}

21

Push Button

By: pixeldev

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    width: 100vw;
    height: 100vh;
    background: rgb(100, 100, 100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#battery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tip {
    height: 20px;
    width: 50px;
    background: rgb(200, 200, 200);
}

#base {
    border: 5px solid rgb(200, 200, 200);
    background: black;
    width: 125px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

#battery-progress-bar {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgb(50, 150, 50);
    display: flex;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 0 0 15px rgb(200, 200, 200);
    justify-content: center;
    align-items: center;
    
    animation-name: batteryChange;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 15s;
}

#charging-symbol {
    position: absolute;
    color: rgb(200, 200, 200);
    text-shadow: 0 0 1px black, 0 0 2.5px black;
    font-size: 3rem;
    height: 250px;
    width: 125px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    animation-name: flashingCharge;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes flashingCharge {
    0% { opacity: 1 }
    5% { opacity: 0 }
    10% { opacity: 1 }
    15% { opacity: 0 }
    20% { opacity: 1 }
    25% { opacity: 0 }
    30% { opacity: 1 }
    35% { opacity: 0 }
    40% { opacity: 1 }
    50% { opacity: 0 }
}

#charging-symbol:hover {
    opacity: 1;
}

@keyframes batteryChange {
    0% {
        background: rgb(150, 50, 5);
        height: 0%;
    }
    40% {
        background: rgb(150, 50, 5);
    }
    50% {
        background: rgb(200, 175, 100);
    }
    70% {
        background: rgb(50, 150, 50);
    }
}

@keyframes batteryChangeV2 {
    from {
        background: rgb(150, 50, 5);
        height: 0%;
    }
    to {
        background: rgb(50, 150, 50);
        height: 100%;
    }
}

21

Battery Charging Progress

By: pixeldev

body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
.loader {
  --sizeVar: 10vmax;
  position: relative;
  width: var(--sizeVar);
  height: var(--sizeVar);
  animation: loaderRotate 2000ms ease-in-out infinite;
}
.loader::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}
.loader-square {
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: #f25022;
  transform-origin: center;
  animation: squareAnim 4000ms cubic-bezier(1, 0, 0, 1) infinite,
    squareBlink 1000ms ease-in-out infinite;
  box-shadow: 0 0 8px #f25022aa, 0 0 32px #f2502277;
}
.loader-square:nth-of-type(2) {
  background-color: #7fba02;
  box-shadow: 0 0 8px #7fba02aa, 0 0 32px #7fba0277;
  animation-delay: -1000ms, -75ms;
}
.loader-square:nth-of-type(3) {
  background-color: #ffb902;
  box-shadow: 0 0 8px #ffb902aa, 0 0 32px #ffb90277;
  animation-delay: -2000ms, -150ms;
}
.loader-square:nth-of-type(4) {
  background-color: #01a4ef;
  box-shadow: 0 0 8px #01a4efaa, 0 0 32px #01a4ef77;
  animation-delay: -3000ms, -225ms;
}

@keyframes squareAnim {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(120%, 0);
  }
  50% {
    transform: translate(120%, 120%);
  }
  75% {
    transform: translate(0, 120%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes squareBlink {
  0% {
    filter: brightness(110%);
  }
  20% {
    filter: brightness(110%);
  }
  50% {
    filter: brightness(80%);
  }
  80% {
    filter: brightness(110%);
  }
  100% {
    filter: brightness(110%);
  }
}
@keyframes loaderRotate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

21

All

3D Cutout Card Hover effect

By: pixeldev

Notification Toggle

By: pixeldev

Pixel Heart

By: pixeldev

CyberPunk Glitch Input

By: pixeldev

Cool 3D Hover Effect

By: pixeldev

Stylish Add to cart Button

By: pixeldev

Glass Effect Icons

By: pixeldev

On Click Ripple Effect

By: pixeldev

Birthday Cake Candle

By: pixeldev

Push Button

By: pixeldev

Battery Charging Progress

By: pixeldev

Glowing Squares Loader

By: pixeldev