The Power of Pure CSS - No JavaScript Needed

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, Roboto, Arial;
  color:#0b1020;
}

.ccs-stage{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 18px 50px rgba(2,6,23,.08);
  background:#fff;
}

.ccs-story{
  width:64px;
  height:64px;
  border:0;
  padding:0;
  border-radius:999px;
  cursor:pointer;
  position:relative;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease;
}
.ccs-story:hover{ transform:translateY(-1px); }
.ccs-story:active{ transform:translateY(0) scale(.98); }

/* Inner “photo” */
.ccs-story::before{
  content:"";
  position:absolute;
  inset:6px; /* ring thickness */
  border-radius:inherit;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), transparent 45%),
    linear-gradient(135deg, rgba(37,99,235,.35), rgba(244,63,94,.35)),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  border:1px solid rgba(15,23,42,.5);
  box-shadow:0 12px 24px rgba(2,6,23,.10);
}

/* Ring layer */
.ccs-story::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, rgba(37,99,235,1), rgba(244,63,94,1), rgba(245,158,11,1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:1;
}

/* Seen vs unseen */
.ccs-story--seen::after{
  background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.12));
  opacity:1;
}

/* Subtle “unseen energy” */
.ccs-story--unseen::after{
  filter:saturate(1.05);
}
.ccs-story--unseen:hover::after{
  transform:rotate(10deg);
  transition:transform .25s ease;
}

/* Focus */
.ccs-story:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.14);
  border-radius:999px;
}

36

Instagram Story Ring Status

By: pixeldev

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

.btn-wrapper {
  --width: 220px;
  --height: 60px;
  --padding: 8px;
  --border-radius: 24px;
  --dot-size: 8px;
  --btn-color: #e4e4e4;
  --hue: 142deg;
  --animation-duration: 1.2s;

position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  border: none;

background-color: #00000008;

box-shadow:
    1px 1px 2px 0 #fffd,
    2px 2px 2px #0001 inset,
    2px 2px 4px #0001 inset,
    2px 2px 8px #0001 inset;

transition: box-shadow 50ms linear;

perspective: 150px;
  perspective-origin: center;

user-select: none;
  z-index: 1;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.25em;
  text-align: left;
  padding: 0 var(--height) 0 calc(var(--padding) * 2);

width: calc(100% - 2 * var(--padding));
  height: calc(100% - 2 * var(--padding));
  border-radius: calc(var(--border-radius) - var(--padding));
  border: none;
  cursor: pointer;

background: linear-gradient(#fff2, #0001), var(--btn-color);

box-shadow:
    1px 1px 2px -1px #fff inset,
    0 2px 1px #00000010,
    0 4px 2px #00000010,
    0 8px 4px #00000010,
    0 16px 8px #00000010,
    0 32px 16px #00000010;

transition:
    transform 0.25s cubic-bezier(0.25, 1.5, 0.5, 2.2),
    box-shadow 0.25s cubic-bezier(0.25, 1.5, 0.5, 1),
    filter 0.3s cubic-bezier(0.25, 1.5, 0.5, 1);
  will-change: transform, filter;

z-index: 2;
}

.btn-txt {
  display: inline-block;

font-size: 16px;
  font-weight: 500;
  font-family: "Montserrat", "Manrope", sans-serif;

color: #5550;
  background-image: linear-gradient(#000a, #555);
  background-clip: text;
  filter: drop-shadow(0 1px 0px #fff) drop-shadow(0 -1px 0px #0005);
}

.disclaimer-txt {
  position: absolute;
  left: var(--border-radius);
  bottom: -24px;
  font-family: "Montserrat", "Manrope", sans-serif;
  font-size: 12px;
  color: #0009;
}

.dot {
  position: absolute;
  top: calc(50% - var(--dot-size) / 2);
  right: calc(var(--height) / 2 - var(--padding) / 2);
  width: var(--dot-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: hsla(var(--hue), 0%, 50%, 0.1);

border: 1px solid hsla(var(--hue), 0%, 60%, 0.6);
  box-sizing: border-box;

box-shadow:
    1px 1px 2px -1px #fffe inset,
    0 2px 1px #00000010,
    0 4px 2px #00000010,
    0 8px 4px #00000010;

pointer-events: none;
  z-index: 3;
}

.dot::before {
  content: "";
  position: absolute;
  top: calc(var(--padding) / -2);
  left: calc(var(--padding) / -2);
  width: calc(100% + var(--padding));
  height: calc(100% + var(--padding));
  border-radius: inherit;
  background-color: #0006;
  mask-image: radial-gradient(circle at 50% 60%, transparent 50%, black);
}

.dot::after {
  content: "";
  position: absolute;
  top: calc(var(--padding) / -2);
  left: calc(var(--padding) / -2);
  width: calc(100% + var(--padding));
  height: calc(100% + var(--padding));
  border-radius: inherit;
  background-color: #0000;

box-shadow:
    0 0 10px 2px hsla(var(--hue), 80%, 50%, 0.3),
    0 0 20px 10px hsla(var(--hue), 80%, 50%, 0.5),
    0 0 50px 20px hsla(var(--hue), 80%, 50%, 0.5),
    0 0 16px 1px hsla(var(--hue), 100%, 60%, 0.9) inset;

opacity: 0;
}

.pulse {
  transition: transform 200ms ease-in;

&.dot {
    animation: bg-anim var(--animation-duration) ease-in-out infinite;
  }

&::after {
    animation: opacity-anim var(--animation-duration) ease-in-out infinite;
  }
}

@keyframes bg-anim {
  0%,
  100% {
    background-color: hsla(var(--hue), 50%, 50%, 0);
  }
  50% {
    background-color: hsla(var(--hue), 100%, 50%, 1);
  }
}

@keyframes opacity-anim {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.btn:hover,
.btn:focus-visible {
  filter: drop-shadow(
    var(--padding) 0 var(--padding) hsla(var(--hue), 70%, 60%, 0.6)
  );
  transform: translate3d(0, -2px, 2px);

.btn-txt {
    background-color: hsla(var(--hue), 50%, 50%, 1);
    background-image: none;
  }

.pulse {
    &.dot {
      animation: none;
      background-color: hsla(var(--hue), 100%, 50%, 1);
    }
    &::after {
      animation: none;
      opacity: 1;
    }
  }
}

.btn:focus-visible {
  outline: 2px dashed hsla(var(--hue), 70%, 40%, 1);
  outline-offset: var(--padding);
}

.btn:active {
  filter: drop-shadow(
    var(--padding) 0 var(--padding) hsla(var(--hue), 100%, 50%, 1)
  );
  transform: translate3d(0, 0, -4px);

.btn-txt {
    background-color: hsla(var(--hue), 50%, 50%, 1);
  }

~ .dot {
    animation-play-state: paused;
    background-color: hsla(var(--hue), 100%, 50%, 1);
  }
}

.btn-wrapper:has(.btn:active) {
  box-shadow:
    1px 1px 2px 0 #fff,
    2px 2px 2px #0001 inset,
    2px 2px 4px #0001 inset,
    2px 2px 8px #0001 inset,
    0 0 32px 2px hsla(var(--hue), 50%, 50%, 0.5) inset;
}

36

Bouncy Button

By: pixeldev

/* Change colors here */
:root{
  --ccs-bg:#ffffff;
  --ccs-ink:#0b1020;
  --ccs-card:#0b0f1a;
  --ccs-glow:#b79cff;
  --ccs-glow2:#7c5cff;
}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Card */
.ccs-electricCard{
  width:min(340px, 86vw);
  padding:12px 18px;
  border-radius:22px;
  background:
    radial-gradient(140% 100% at 20% 10%, rgba(183,156,255,.18), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(124,92,255,.16), transparent 55%),
    var(--ccs-card);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Neon border layer (base glow) */
.ccs-electricCard::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:
    conic-gradient(from 0deg,
      transparent 0 8%,
      rgba(183,156,255,.85) 10%,
      transparent 16%,
      rgba(183,156,255,.55) 26%,
      transparent 34%,
      rgba(124,92,255,.95) 44%,
      transparent 52%,
      rgba(183,156,255,.75) 66%,
      transparent 74%,
      rgba(124,92,255,.85) 86%,
      transparent 100%);
  filter: blur(7px);
  opacity:.9;
  animation: ccs-spin 3.2s linear infinite;
  /* show only the ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:3px;
}

/* "Electric" crackle layer (jitter + little sparks) */
.ccs-electricCard::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  pointer-events:none;

/* Tiny sparks around the edges (random-ish via multiple gradients) */
  background:
    radial-gradient(8px 6px at 10% 8%, rgba(183,156,255,.9), transparent 60%),
    radial-gradient(10px 7px at 86% 12%, rgba(124,92,255,.9), transparent 60%),
    radial-gradient(8px 6px at 92% 58%, rgba(183,156,255,.85), transparent 60%),
    radial-gradient(9px 7px at 14% 78%, rgba(124,92,255,.9), transparent 60%),
    radial-gradient(8px 6px at 55% 92%, rgba(183,156,255,.85), transparent 60%),
    conic-gradient(from 90deg, rgba(183,156,255,.18), transparent 18%, rgba(124,92,255,.22), transparent 60%, rgba(183,156,255,.18));
  filter: blur(1px) drop-shadow(0 0 12px rgba(183,156,255,.55));
  opacity:.9;

/* ring-only mask again */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:1px;

animation: ccs-zap 320ms steps(3, end) infinite;
}

/* Content */
.ccs-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.08em;
  font-size:12px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

.ccs-title{
  margin:22px 0 8px;
  font-size:34px;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.02em;
}

.ccs-sub{
  margin:0;
  max-width:26ch;
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.45;
}

/* Animations */
@keyframes ccs-spin{
  to{ transform: rotate(360deg); }
}

/* quick jitter to feel "electric" */
@keyframes ccs-zap{
  0%   { transform: translate(0,0) rotate(0deg); opacity:.85; }
  35%  { transform: translate(1px,-1px) rotate(.4deg); opacity:1; }
  70%  { transform: translate(-1px,1px) rotate(-.4deg); opacity:.92; }
  100% { transform: translate(0,0) rotate(0deg); opacity:.85; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ccs-electricCard::before,
  .ccs-electricCard::after{ animation:none; }
}

35

Animated Border Card

By: pixeldev

*, ::after, ::before {
	box-sizing: border-box;
}
html {
	font-size: 100%;
}
body {
	max-width: 1440px;
	font-family: Verdana, sans-serif;
	font-size: 1rem;
}

.accordion-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 95vw;
	margin: 0 auto;
	padding: 1rem;
	background: #E5E5E5;
}

/*=========== 56.25em (900px)=========== */
@media only screen and (min-width : 56.25em) {
	.accordion-container {
		width: 85vw;
	}
}

h2 {
	margin: .25rem;
	text-align: center;
	color: #333;
}

.accordion-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.accordion-nav h3 {
	margin: .25rem 0;
	padding: 0;
	font-size: .75rem;
	font-weight: 300;
}

.accordion-nav h3 a {
	display: block;
	width: 250px;
	margin: 0;
	padding: .75rem;
	background-color: #7F7F7F;
	color: floralwhite;
	text-decoration: none;
	border-radius: .25rem;
}

/* =========== 33.750em (540px) =========== */
@media only screen and (min-width: 33.750em) {
	.accordion-nav h3 {
		font-size: 1.25rem;
	}
	.accordion-nav h3 a {
		width: 400px;
	}
}

/* =========== 48em (768px) =========== */
@media only screen and (min-width : 48em) {
	.accordion-nav h3 a {
		width: 700px;
	}
}

.accordion-nav > :not(:target) h3 a {
	background-color: #BFBFBF;
	color: #507293;
}

.accordion-nav h3 a:hover,
.accordion-nav h3 a:active,
.accordion-nav h3 a:focus {
	background-color: #BFBFBF;
	color: #666;
}

.accordion-nav > :target p,
.accordion-nav > :not(:target) p {
	margin: .25rem 0;
	padding: 0;
	height: 0;
	overflow: hidden;
	transition: all ease-in 1.5s;
}

.accordion-nav > :target p {
	height: 150px;
	width: 250px;
}

/* =========== 33.750em (540px) =========== */
@media only screen and (min-width: 33.750em) {
	.accordion-nav > :target p {
		height: 240px;
		width: 400px;
	}
}

/* =========== 48em (768px) =========== */
@media only screen and (min-width : 48em) {
	.accordion-nav > :target p {
		height: 420px;
		width: 700px;
	}
}

.accordion-nav #item-1 p,
.accordion-nav #item-2 p,
.accordion-nav #item-3 p {
	position: relative;
	/*background: url('../../images/item-01.jpg');*/
	background: url('http://img.imarketinx.de/pics/item-01.jpg');
	background-size: cover;
	border-radius: .25rem;
}

.accordion-nav #item-2 p {
	background-image: url('http://img.imarketinx.de/pics/item-02.jpg');
}

.accordion-nav #item-3 p {
	background-image: url('http://img.imarketinx.de/pics/item-03.jpg');
}

.accordion-nav p {
	height: 150px;
	width: 250px;
}

/* =========== 33.750em (540px) =========== */
@media only screen and (min-width: 33.750em) {
	.accordion-nav p {
		height: 240px;
		width: 400px;
	}
}

/* =========== 48em (768px) =========== */
@media only screen and (min-width : 48em) {
	.accordion-nav p {
		height: 420px;
		width: 700px;
	}
}

.accordion-nav p span,
.accordion-close {
	display: inline;
	position: absolute;
	font-size: .75rem;
}

/* =========== 33.750em (540px) =========== */
@media only screen and (min-width: 33.750em) {
	.accordion-nav p span,
	.accordion-close {
		font-size: 1rem;
	}
}

.accordion-nav p span {
	bottom: 0;
	left: 0;
	height: 2rem;
	width: 100%;
	padding: .25rem;
	text-indent: .25rem;
	background: rgba(0,0,0,.6);
	color: #FFF;
	border-radius: 0 0 .25rem .25rem;
}

.accordion-close  {
	right: 5%;
	text-decoration: none;
	color: #BFBFBF;
}
.accordion-close::before  {
	font-weight: 300;
	content: "x ";
}

35

Pure CSS Accordion with Images

By: pixeldev

<section class="hero-section">
  <div class="card-grid">
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </li>
    <a class="card" href="#">
      <div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
      <div class="card__content">
        <p class="card__category">Category</p>
        <h3 class="card__heading">Example Card Heading</h3>
      </div>
    </a>
  <div>
</section>

:root{
  --background-dark: #1b1f22;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --text-light: rgba(255,255,255,0.75);
  --text-lighter: rgba(255,255,255,0.9);
  --width-container: 1200px;
}

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

html{
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

body{
  height: 100%;
}

.hero-section{
  align-items: center;
  background: var(--background-dark);
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.card{
  list-style: none;
  position: relative;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0.5) contrast(1.2) blur(20px);
}

.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category{
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--spacing-m);
  text-transform: uppercase;
}

.card__heading{
  color: var(--text-lighter);
  font-size: 2rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.2;
  word-spacing: 100vw;
}

35

Filtered Cards Animation

By: pixeldev

body {
    margin:0;
    padding:0;
    background-color:#333;
    font-family:verdana;
}

.smoke {
    position:absolute;
    top:50%;
    lefT:50%;
    transform:translate(-50%,-50%);
}

.smoke ul {
    margin:0;
    padding:0;
    display:flex;
    
}

.smoke ul li {
    list-style:none;
    font-weight:bold;
    letter-spacing:10px;
    filter:blur(1px);
    color:#fff;
    font-size:6em;
    display: inline-block;
}

.smoke ul:hover li {
    animation: smoke 2s linear forwards;
}

@keyframes smoke {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    100% {
      transform: rotate(45deg) translateY(-200px);
        opacity: 0;
        filter:blur(20px);
    }
}

.smoke ul li:nth-child(1){
    animation-delay:0s
}
.smoke ul li:nth-child(2){
    animation-delay:.4s
}
.smoke ul li:nth-child(3){
    animation-delay:.8s
}
.smoke ul li:nth-child(4){
    animation-delay:1.2s
}
.smoke ul li:nth-child(5){
    animation-delay:1.6s
}

34

Smoke Animation Pure CSS Hover Text

By: pixeldev

@import url(https://fonts.bunny.net/css?family=krub:200i,300);

body {
  font-family: 'Krub', sans-serif;
  background-color: rgb(248, 244, 238);
  color: rgb(10, 10, 10);
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  display: grid;
  place-content: center;
}

/* Wrapper */
.wrapper {
  perspective: 500px;
  transform-style: preserve-3d;
  position: relative;
  display: grid;
  place-content: center;
}

.wrapper::before {
  content: "What";
  font-size: clamp(2rem, 5.5vw, 20rem);
  text-transform: uppercase;
  text-decoration: underline overline;
  text-decoration-color: hsl(70, 100%, 40%);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  font-weight: 700;

animation: swapText 15s linear infinite,
             rotateWrapper 15s linear infinite;
}

/* Text swapping animation */
@keyframes swapText {
  10%, 100% { content: "What"; }
  20% { content: "goes"; }
  50% { content: "around"; }
  60% { content: "comes"; }
  90% { content: "around"; }
}

/* Rotation animation */
@keyframes rotateWrapper {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

33

Swap Text Animation

By: pixeldev

33

Simple Hover Menu

By: pixeldev

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.6s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320));
}
body,
input {
	font: 1em/1.5 sans-serif;
}
body {
	background-color: hsl(var(--hue),10%,90%);
	color: hsl(var(--hue),10%,10%);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
body:has(.switch__input:checked) {
	background-color: hsl(var(--hue),10%,20%);
	color: hsl(var(--hue),10%,90%);
}
.switch,
.switch__input {
	display: block;
	-webkit-tap-highlight-color: transparent;
}
.switch {
	margin: auto;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.switch__icon {
	color: hsla(var(--hue),10%,80%);
	pointer-events: none;
	position: absolute;
	top: 0.375em;
	left: 0.375em;
	width: 0.75em;
	height: 0.75em;
	transition:
		color var(--trans-dur),
		transform var(--trans-dur) var(--trans-timing);
}
.switch__icon:nth-of-type(2) {
	right: 0.375em;
	left: auto;
}
.switch__inner,
.switch__inner-icons {
	border-radius: 0.5em;
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 2.25em;
	height: 1em;
}
.switch__inner:before,
.switch__inner-icons {
	transition: transform var(--trans-dur) var(--trans-timing);
	transform: translateX(-1.25em);
}
.switch__inner:before {
	background-color: var(--primary);
	border-radius: inherit;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.switch__inner-icons {
	pointer-events: none;
}
.switch__inner-icons .switch__icon {
	color: hsl(0,0%,100%);
	top: 0.125em;
	left: 0.125em;
	transform: translateX(1.25em);
}
.switch__inner-icons .switch__icon:nth-child(2) {
	right: 0.125em;
	left: auto;
}
.switch__input {
	background-color: hsl(0,0%,100%);
	border-radius: 0.75em;
	box-shadow:
		0 0 0 0.0625em hsla(var(--hue),90%,50%,0),
		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
	outline: transparent;
	width: 2.75em;
	height: 1.5em;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
}
.switch__input:checked {
	background-color: hsl(var(--hue),10%,10%);
}
.switch__input:checked ~ .switch__icon {
	color: hsla(var(--hue),10%,40%);
}
.switch__input:checked ~ .switch__inner:before,
.switch__input:checked ~ .switch__inner-icons {
	transform: translateX(1.25em);
}
.switch__input:not(:checked) ~ .switch__icon:first-of-type,
.switch__input:checked ~ .switch__icon:nth-of-type(2) {
	transform: rotate(360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:first-of-type {
	transform: translateX(-1.25em) rotate(-360deg);
}
.switch__input:checked ~ .switch__inner-icons .switch__icon:nth-of-type(2) {
	transform: translateX(-1.25em) rotate(360deg);
}
.switch__input:focus-visible {
	box-shadow:
		0 0 0 0.0625em hsla(var(--hue),90%,50%,1),
		0 0.125em 0.5em hsla(var(--hue),10%,10%,0.1);
}
.switch__sr {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}

33

Day/Night theme Switch

By: pixeldev

<title>Menu Hexagonal</title>

<nav>
		<ul class="menu_hex">
			<a href="#">
				<li class="hexagone">
					<p>Accueil</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 1</p>
					</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 2</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 3</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 4</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 5</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 6</p>
					</li>
				</a>
				<a href="#">
					<li class="hexagone">
						<p>Page 7</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 8</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 9</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 10</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 11</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 12</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 13</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 14</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 15</p>
				</li>
			</a>
			<a href="#">
				<li class="hexagone">
					<p>Page 16</p>
				</li>
			</a>
		</ul>
	</nav>

html {
	min-height : 100%;
}

.menu_hex {
	margin : 0 auto;
	margin-top : -150px;
	padding-top : 70px;
	height : 300px;
	width : 680px;
	list-style-type : none;
	text-align : center;
	z-index : 20;
	z-index : 0;
	transition : all 0.3s ease;
	background : #888888;
}

.hexagone {
	width : 90px;
	height : 45px;
	float : left;
	background : #474747;
	position : absolute;
	line-height : 1em;
	display : table;
	margin-top : 88px;
	margin-bottom : 0;
	margin-left : 275px;
	margin-right : 0;
	transition : all 0.3s ease-in;
}

.hexagone:hover {
	width : 124px;
	height : 70px;
	background : #585858;
	min-width : 85px;
	min-height : 40px;
}

.hexagone p {
	font-size : 1em;
	vertical-align : middle;
	display : table-cell;
	transition : all 0.3s ease-in;
}

.hexagone:hover p {
	font-size : 1.2em;
	line-height : 1.2em;
}

.hexagone:before {
	content : "";
	position : absolute;
	top : -30px;
	left : 0;
	width : 0;
	height : 0;
	border-left : 45px solid transparent;
	border-right : 45px solid transparent;
	border-bottom : 30px solid #474747;
	transition : all 0.3s ease-in;
}

.hexagone:after {
	content : "";
	position : absolute;
	bottom : -30px;
	left : 0;
	width : 0;
  height : 0;
	border-left : 45px solid transparent;
	border-right : 45px solid transparent;
	border-top : 30px solid #474747;
	transition : all 0.3s ease-in;
}

.hexagone:hover:after {
	bottom : -41px;
	border-top : 41px solid #585858;
	border-right : 62px solid transparent;
	border-left : 62px solid transparent;
}

.hexagone:hover:before {
	top : -41px;
	border-bottom : 41px solid #585858;
	border-right : 62px solid transparent;
	border-left : 62px solid transparent;
}

.menu_hex:hover a:nth-child(1) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 0;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(2) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 110px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(3) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 220px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(4) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 330px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(5) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 440px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(6) .hexagone {
	margin-top : 0;
	margin-bottom : 0;
	margin-left : 550px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(11) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 495px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(10) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 385px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(9) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 275px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(8) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 165px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(7) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 55px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(12) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 110px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(13) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 220px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(14) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 330px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(15) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 440px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(16) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 550px;
	margin-right : 0;
}

.menu_hex:hover a:nth-child(17) .hexagone {
	margin-top : 184px;
	margin-bottom : 0;
	margin-left : 0;
	margin-right : 0;
}

.menu_hex a:nth-child(1) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 25px;
	margin-right : 0;
}

.menu_hex a:nth-child(1) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : -17px;
	margin-right : 0;
}

.menu_hex a:nth-child(2) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 125px;
	margin-right : 0;
}

.menu_hex a:nth-child(2) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : 93px;
	margin-right : 0;
}

.menu_hex a:nth-child(3) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 225px;
	margin-right : 0;
}

.menu_hex a:nth-child(3) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : 203px;
	margin-right : 0;
}

.menu_hex a:nth-child(4) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 325px;
	margin-right : 0;
}

.menu_hex a:nth-child(4) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : 313px;
	margin-right : 0;
}

.menu_hex a:nth-child(5) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 425px;
	margin-right : 0;
}

.menu_hex a:nth-child(5) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : 423px;
	margin-right : 0;
}

.menu_hex a:nth-child(6) .hexagone {
	margin-top : 10px;
	margin-bottom : 0;
	margin-left : 525px;
	margin-right : 0;
}

.menu_hex a:nth-child(6) .hexagone:hover {
	margin-top : -16px;
	margin-bottom : 0;
	margin-left : 533px;
	margin-right : 0;
}

.menu_hex a:nth-child(11) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 475px;
	margin-right : 0;
}

.menu_hex a:nth-child(11) .hexagone:hover {
	height : 60px;
	margin-top : 85px;
	margin-bottom : 0;
	margin-left : 478px;
	margin-right : 0;
}

.menu_hex a:nth-child(10) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 375px;
	margin-right : 0;
}

.menu_hex a:nth-child(10) .hexagone:hover {
	height : 60px;
	margin-top : 85px;
	margin-bottom : 0;
	margin-left : 368px;
	margin-right : 0;
}
	
.menu_hex a:nth-child(9) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 275px;
	margin-right : 0;
}

.menu_hex a:nth-child(9) .hexagone:hover {
	height : 60px;
	margin-top : 85px;
	margin-bottom : 0;
	margin-left : 258px;
	margin-right : 0;
}

.menu_hex a:nth-child(8) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 175px;
	margin-right : 0;
}

.menu_hex a:nth-child(8) .hexagone:hover {
	height : 60px;
	margin-top : 85px;
	margin-bottom : 0;
	margin-left : 148px;
	margin-right : 0;
}

.menu_hex a:nth-child(7) .hexagone {
	margin-top : 92px;
	margin-bottom : 0;
	margin-left : 75px;
	margin-right : 0;
}

.menu_hex a:nth-child(7) .hexagone:hover {
	height : 60px;
	margin-top : 85px;
	margin-bottom : 0;
	margin-left : 38px;
	margin-right : 0;
}

.menu_hex a:nth-child(12) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 125px;
	margin-right : 0;
}

.menu_hex a:nth-child(12) .hexagone:hover {
	margin-top : 176px;
	margin-bottom : 0;
	margin-left : 93px;
	margin-right : 0;
}

.menu_hex a:nth-child(13) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 225px;
	margin-right : 0;
}

.menu_hex a:nth-child(13) .hexagone:hover {
	margin-top : 176px;
	margin-bottom : 0;
	margin-left : 203px;
	margin-right : 0;
}

.menu_hex a:nth-child(14) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 325px;
	margin-right : 0;
}

.menu_hex a:nth-child(14) .hexagone:hover {
	margin-top : 176px;
	margin-bottom : 0;
	margin-left : 313px;
	margin-right : 0;
}

.menu_hex a:nth-child(15) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 425px;
	margin-right : 0;
}

.menu_hex a:nth-child(15) .hexagone:hover {
	margin-top : 176px;
	margin-bottom : 0;
	margin-left : 423px;
	margin-right : 0;
}

.menu_hex a:nth-child(16) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 525px;
	margin-right : 0;
}

.menu_hex a:nth-child(16) .hexagone:hover {
	margin-top : 176px;
  margin-bottom : 0;
	margin-left : 533px;
	margin-right : 0;
}

.menu_hex a:nth-child(17) .hexagone {
	margin-top : 174px;
	margin-bottom : 0;
	margin-left : 25px;
	margin-right : 0;
}

.menu_hex a:nth-child(17) .hexagone:hover {
	margin-top : 176px;
	margin-bottom : 0;
	margin-left : -17px;
	margin-right : 0;
}

33

Menu Hexagone Pure CSS

By: pixeldev

body,html{margin:0;padding:0;height:100%;}
body{background:#E3DFD2;box-shadow: inset 0 0 20vmin 0 #585247;}
.wrap{
  position:relative;
  width:80vmin; height:80vmin;
  margin:0 auto;
  background:inherit;
  transform:scale(0.2) translatez(0px);
  opacity:0;
  transition:transform .5s, opacity .5s;
}
a{
  position:absolute;
  left:0; top:0;
  width:47.5%; height:47.5%;
  overflow:hidden;
  transform:scale(.5) translateZ(0px);
  background:#585247;
}
a div{
  height:100%;
  background-size:cover;
  opacity:.5;
  transition:opacity .5s;
  border-radius:inherit;
}
a:nth-child(1){
  border-radius:40vmin 0 0 0;
  transform-origin: 110% 110%;
  transition:transform .4s .15s;
}
a:nth-child(1) div{
  background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
a:nth-child(2){
  border-radius:0 40vmin 0 0;
  left:52.5%;
  transform-origin: -10% 110%;
  transition:transform .4s .2s;
}
a:nth-child(2) div{
  background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
}
a:nth-child(3){
  border-radius:0 0 0 40vmin;
  top:52.5%;
  transform-origin: 110% -10%;
  transition:transform .4s .25s;
}
a:nth-child(3) div{
  background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');
}
a:nth-child(4){
  border-radius:0 0 40vmin 0;
  top:52.5%; left:52.5%;
  transform-origin: -10% -10%;
  transition:transform .4s .3s;
}
a:nth-child(4) div{
  background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');
}
a:nth-child(5){
  width:55%;height:55%;
  left:22.5%; top:22.5%;
  border-radius:50vmin;
  box-shadow:0 0 0 5vmin #E3DFD2;
  transform:scale(1);
}
a:nth-child(5) div{
  background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');
}
span{
  position:relative;
  display:block;
  margin:0 auto;
  top:45vmin;
  width:10vmin; height:10vmin;
  border-radius:100%;
  background:#585247;
  transform:translateZ(0px);
}
span span{
  position:absolute;
  width:60%;height:3px;
  background:#ACA696;
  left:20%; top:50%;
  border-radius:0;
}
span span:after, span span:before{
  content:'';
  position:absolute;
  left:0; top:-1.5vmin;
  width:100%; height:100%;
  background:inherit;
}
span span:after{
  top:1.5vmin;
}
span:hover + .wrap, .wrap:hover{
  transform:scale(.8) translateZ(0px);
  opacity:1;
}
span:hover + .wrap a, .wrap:hover a{
  transform:scale(1) translatez(0px);
}
a:hover div{
  opacity:1;
  transform:translatez(0px);
}

32

Radial Menu Hover

By: pixeldev

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
	background-image: linear-gradient(45deg, #223, #112);
  background:
    radial-gradient(at 100% 0, #fff2, #fff0 50%),
    radial-gradient(at 0% 100%, #0002, #0000 50%),
    #545153;
}

@property --x {
  syntax: '<angle>';
  inherits: true;
  initial-value: 1deg;
}

@property --c {
  syntax: '<color>';
  inherits: true;
  initial-value: #0000;
}

.neon {
  --x: 1deg;
  --c: #0000;
  --color: #0ff;
  font-size: 3rem;
  appearance: none;
  position: relative;
  aspect-ratio: 2;
  border-radius: 100em;
  background: 
    linear-gradient(to bottom right, #0001, #0000),
    #444143;
  width: 3em;
  box-shadow:
    inset 0 0 0.25em -0.25em #0008,
    inset 0.05em 0.05em 0.2em #000811,
    inset -0.05em -0.05em 0.15em 0.05em #ccc1,
    0 0 0 0.11em #545153
    ;
  transition: --x 0.5s, --c 0.5s, box-shadow 0.5s;
  filter: drop-shadow(0 0 0.2em var(--c));
  
  &::before {
    content: "";
    position: absolute;
    height: 80%;
    aspect-ratio: 1;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    background: 
      radial-gradient(#0000  15%, #343133 16%, #545153 20%),
      repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
      repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
      radial-gradient(var(--c) 17%, #0000 0),
      #545153;
    box-shadow:
      inset -0.05em -0.05em 0.1em #0008,
      inset 0.05em 0.05em 0.1em #ffffff22,
      inset 0.05em 0em 0.1em -0.065em var(--c),
      0.1em 0.1em 0.15em #000c;
    border-radius: 50%;
    transition: left 0.5s, box-shadow 0.1s;
  }
  
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 0.25em);
    height: calc(100% + 0.25em);
    border: 0.1em solid var(--color);
    border-radius: 100em;
    -webkit-mask: conic-gradient(from calc(270deg - var(--x)), #000 calc(2 * var(--x)), #0001 0);
    box-shadow: 0 0 0 2em #0000; /* hack for safari */
  }
  
  &:hover {
    --x: 3deg;
    --c: #0ff5;
    --c: rgb(from var(--color) r g b / 25%);
    box-shadow:
      inset 0 0 0.25em -0.25em #0008,
      inset 0.05em 0.05em 0.2em #000811,
      inset -0.05em -0.05em 0.15em 0.05em #ccc1,
      0 0 0.05em 0.075em #545153
      ;
  }
  
  &:checked {
    --x: 180deg;
    --c: var(--color);
    box-shadow:
    inset 0 0 0.25em -0.25em #0008,
    inset 0.05em 0.05em 0.2em #000811,
    inset -0.05em -0.05em 0.15em 0.05em #ccc1,
    0 0 0.1em 0.05em #545153
    ;
    
    &::before {
      left: 75%;
      box-shadow:
        inset -0.05em -0.05em 0.1em #0008,
        inset 0.05em 0.05em 0.1em #ffffff22,
        inset -0.05em 0em 0.1em -0.035em var(--c),
        0.1em 0.1em 0.15em #000c;
    }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
}

@media print {
  .neon {
    background: none;
    
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .neon, .neon::before, .neon::after {
    transition: none !important;
    animation: none !important;
  }
}

31

All

Instagram Story Ring Status

By: pixeldev

Bouncy Button

By: pixeldev

Animated Border Card

By: pixeldev

Pure CSS Accordion with Images

By: pixeldev

Filtered Cards Animation

By: pixeldev

Smoke Animation Pure CSS Hover Text

By: pixeldev

Swap Text Animation

By: pixeldev

Simple Hover Menu

By: pixeldev

Day/Night theme Switch

By: pixeldev

Menu Hexagone Pure CSS

By: pixeldev

Radial Menu Hover

By: pixeldev

Neon Toggle Switch

By: pixeldev