The Power of Pure CSS - No JavaScript Needed

<div class="main">
  <h1>Responsive Card Grid Layout</h1>
  <ul class="cards">
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=10"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=5"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=11"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=14"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=17"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
    <li class="cards_item">
      <div class="card">
        <div class="card_image"><img src="https://picsum.photos/500/300/?image=2"></div>
        <div class="card_content">
          <h2 class="card_title">Card Grid Layout</h2>
          <p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
          <button class="btn card_btn">Read More</button>
        </div>
      </div>
    </li>
  </ul>
</div>

/* Font */
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');

/* Design */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: #ecf9ff;
}

body {
  color: #272727;
  font-family: 'Quicksand', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  padding: 1rem;
}

.main{
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  color: #ffffff;
  padding: 0.8rem;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 400;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards_item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards_item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card_content {
  padding: 1rem;
  background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
}

.card_title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin: 0px;
}

.card_text {
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;    
  font-weight: 400;
}
.made_by{
  font-weight: 400;
  font-size: 13px;
  margin-top: 35px;
  text-align: center;
}

40

Responsive Card Grid Layout

By: pixeldev

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: 'Exo', sans-serif;
}

.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}

.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh; 
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

39

Animated Background

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
}

38

Smoke Animation Pure CSS Hover Text

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

38

Animated Border Card

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

38

Swap Text Animation

By: pixeldev

37

Circular Loader

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 ";
}

37

Pure CSS Accordion with Images

By: pixeldev

37

Simple Hover Menu

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

37

Filtered Cards Animation

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

36

Neon Toggle 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;
}

36

Menu Hexagone Pure CSS

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

35

All

Responsive Card Grid Layout

By: pixeldev

Animated Background

By: pixeldev

Smoke Animation Pure CSS Hover Text

By: pixeldev

Animated Border Card

By: pixeldev

Swap Text Animation

By: pixeldev

Circular Loader

By: pixeldev

Pure CSS Accordion with Images

By: pixeldev

Simple Hover Menu

By: pixeldev

Filtered Cards Animation

By: pixeldev

Neon Toggle Switch

By: pixeldev

Menu Hexagone Pure CSS

By: pixeldev

Day/Night theme Switch

By: pixeldev