The Power of Pure CSS - No JavaScript Needed

<section class="accordion">
  <div class="tab">
    
    <label for="cb1" class="tab__label">Checkbox</label>
    <div class="tab__content">
      <p>Pure CSS accordion based on the "input:checked + label" style trick.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="cb2" class="tab__label">Open multiple</label>
    <div class="tab__content">
      <p>Using <code><input type="checkbox"></code> allows to have several tabs open at the same time.</p>
    </div>
  </div>
</section>

<section class="accordion accordion--radio">
  <div class="tab">
    
    <label for="rd1" class="tab__label">Radio</label>
    <div class="tab__content">
      <p>If you want to have only one tab open, you can use <code><input type="radio"></code>.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd2" class="tab__label">Open single</label>
    <div class="tab__content">
      <p>But if you wanna close the opened tab, you must add a "close" button somewhere, like the one below, that is just another styled radio input.</p>
    </div>
  </div>
  <div class="tab">
    
    <label for="rd3" class="tab__close">Close open tab ×</label>
  </div>
</section>

:root {
  --primary: #227093;
  --secondary: #ff5252;
  --background: #eee;
  --highlight: #ffda79;
  /* Theme color */
  --theme: var(--primary);
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  place-items: start;
  grid-template-columns: repeat(auto-fit, min(100%, 30rem));
  gap: 1rem;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  color: var(--primary);
  background: var(--background);
}

/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 10rem;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  border: 2px solid;
  border-radius: 0.5rem;
  overflow: hidden;
}
.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--theme);
  cursor: pointer;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}

30

Pure CSS Accordion

By: pixeldev

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

30

Instagram Story Ring Status

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

30

Filtered Cards Animation

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

29

Animated Background

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

29

Pure CSS Accordion with Images

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

29

Swap Text Animation

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

29

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

28

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

27

Neon Toggle Switch

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

All

Pure CSS Accordion

By: pixeldev

Instagram Story Ring Status

By: pixeldev

Filtered Cards Animation

By: pixeldev

Animated Background

By: pixeldev

Pure CSS Accordion with Images

By: pixeldev

Swap Text Animation

By: pixeldev

Menu Hexagone Pure CSS

By: pixeldev

Radial Menu Hover

By: pixeldev

Neon Toggle Switch

By: pixeldev

Animated Border Card

By: pixeldev

Circular Loader

By: pixeldev

Simple Hover Menu

By: pixeldev