The Power of Pure CSS - No JavaScript Needed

.container {
  width: 20%;
  min-width: 180px;
  margin: 0 auto;
}

a {
  display: block;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  width: 78%;
  position: relative;
  z-index: 10;
  background: lightblue;
  margin: 10px 11%;
}

a:hover {
  background: #87C0D3;
}

span {
  display: block;
  padding: 8px 30px;
  position: relative;
  z-index: 10;
  background: inherit;
  text-align: center;
}

a::before, a::after, span::before, span::after {
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 50%;
  background: inherit;
  z-index: -1;
  background-clip: padding-box;
  border-color: #eee;
  border-style: solid;
  border-width: 0;
}

a::before {
  top: -10px;
  left: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-top-width: 10px;
  border-right-width: 12px;
}

a::after {
  top: -10px;
  right: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-top-width: 10px;
  border-left-width: 12px;
}

span::before {
  top: 50%;
  left: 15%;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  -o-transform: skew(-45deg);
  transform: skew(-45deg);
  border-bottom-width: 10px;
  border-right-width: 12px;
}

span::after {
  top: 50%;
  right: 15%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  -ms-transform: skew(45deg);
  -o-transform: skew(45deg);
  transform: skew(45deg);
  border-bottom-width: 10px;
  border-left-width: 12px;
}

38

Hexagon button with pure CSS

By: pixeldev

*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
::selection{
	background-color:#2d98da;
	color:#fff;
}
body{
	background-color:#227093;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
}
.Box{
	position:relative;
	width:150px;
	height:150px;
	border:3px solid rgba(255,255,255,.2);
	border-radius:50%;
	text-align:center;
	line-height:150px;
	color:#57beec;
	font-size:20px;
	box-shadow:0px 0px 10px rgba(0,0,0,.2);
	font-weight:bold;
}
.Box:before{
	content:'';
	position:absolute;
	top:-3px;
	left:-3px;
	width:100%;
	height:100%;
	background-color:transparent;
	border:3px solid transparent;
	border-top:3px solid #57beec;
	border-right:3px solid #57beec;
	border-radius:50%;
	transform:rotate(0deg);
	animation:SpanLoading 2s linear infinite;
}
.Box span{
	position:absolute;
	top: 50%;
	left:50%;
	width:50%;
	height:3px;
	background-color:transparent;
	transform-style:preserve-3d;
	transform-origin:left;
	transform:rotate(42deg);
	animation:Loading 2s linear infinite;
}
.Box span:before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:#57beec;
	right:-7px;
	bottom:-7px;
	box-shadow:0px 0px 10px #57beec;
}

@keyframes Loading{
	0%{
	transform:rotate(42deg);
	}
	100%{
	transform:rotate(402deg);
	}
}

@keyframes SpanLoading{
	0%{
	transform:rotate(0deg);
	}
	100%{
	transform:rotate(360deg);
	}
}

38

Glowing Loader Ring Animation

By: pixeldev

</div>
    <div class="title">
      <h3 class="main-title">Spring</h3>
      <h4 class="subtitle">A flower blossoms for its own joy.
      </h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 2" class="background-photo" src="https://images.unsplash.com/photo-1491929007750-dce8ba76e610?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=747&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">Summer</h3>
      <h4 class="subtitle">Every summer has a story.</h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 3" class="background-photo" src="https://images.unsplash.com/photo-1459478309853-2c33a60058e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">fall</h3>
      <h4 class="subtitle">Life starts all over when it gets crisp in the fall.</h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 4" class="background-photo" src="https://images.unsplash.com/photo-1457269449834-928af64c684d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">winter</h3>
      <h4 class="subtitle">When snow falls, nature listens.</h4>
    </div>
  </div>
</div>

/* BY Mostafa Alvandi*/

/*
FONTS
*/

@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500;700&display=swap");

/*
RESET
*/

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

/*
LAYOUT
*/

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(
      to right,
      rgba(28, 103, 99, 0.4),
      rgba(12, 71, 70, 0.6)
    ),
    url("https://images.unsplash.com/photo-1457269449834-928af64c684d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80")
      no-repeat center center/cover;
  font-family: "Baloo Tammudu 2", cursive;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  height: 60%;
  width: 95%;
  padding: 1rem;
}

.item {
  flex: 0 0 12%;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55), -1px -1px 2px rgba(0, 0, 0, 0.51);
  transition: 0.5s;
}

.photo {
  height: 100%;
  width: 100%;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: blur(1px);
  transition: 0.5s;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  opacity: 0;
  transition: 1s;
}

.title {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  padding: 1rem;
}
.main-title {
  color: aliceblue;
  text-transform: uppercase;
  text-shadow: 1px 1px 5px rgba(45, 44, 44, 0.77),
    -1px 2px 1px rgba(50, 50, 50, 0.8);
  transform-origin: top left;
  transition: 0.5s;
}

.subtitle {
  position: absolute;
  bottom: 1rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  padding-right: 1rem;
  color: aliceblue;
  text-shadow: 1px 1px 5px black;
  opacity: 0;
  transform: scale(0) translateY(2rem);
  transition: transform 0.1s 0.2s, opacity 0.1s 0.4s;
}

/*
ANIMATIONS
*/

.item:hover {
  flex: 1;
}

.item:hover .overlay {
  background-image: linear-gradient(
    to top,
    rgb(2, 2, 2),
    rgba(47, 46, 46, 0) 30%
  );
  opacity: 1;
  transition: 0.8s;
}

.item:hover .main-title {
  transform: scale(2);
}

.item:hover .subtitle {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.item:hover img {
  filter: blur(0);
}

38

Image accordion slider (pure CSS) 2

By: pixeldev

html,
body {
  height: 100%;
  margin: 0px;
}

.slider-container {
  background: linear-gradient(
    149deg,
    rgb(247, 0, 255) 0%,
    rgb(255, 145, 0) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.slide:nth-of-type(even) {
  background-color: rgb(250, 246, 212);
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  scroll-snap-align: center;
  margin-right: 0px;
  box-sizing: border-box;
  background: white;
  transform-origin: center center;
  transform: scale(1);
}

.slide__text {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.slide a {
  background: none;
  border: none;
}

a.slide__prev,
.slider::before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 5%;
}

a.slide__next,
.slider::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 5%;
}

.slider::before,
.slider::after,
.slide__prev,
.slide__next {
  position: absolute;
  top: 48%;
  width: 35px;
  height: 35px;
  border: solid black;
  border-width: 0 4px 4px 0;
  padding: 3px;
  box-sizing: border-box;
}

.slider::before,
.slider::after {
  content: "";
  z-index: 1;
  background: none;
  pointer-events: none;
}

.slider__nav {
  box-sizing: border-box;
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
}

.slider__navlink {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0 10px 0 10px;
}

.read-article{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: #000;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: arial;
  text-decoration: none;
  box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
    background: #d5d5d5;
    box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
  display: none;
}

37

Pure CSS Slider – fullPage blog

By: pixeldev

<section id="slideshow">
			<div class="entire-content">
				<div class="content-carrousel">
					<figure class="shadow"><img src="https://images.pexels.com/photos/758733/pexels-photo-758733.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/21261/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/567973/pexels-photo-567973.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/776653/pexels-photo-776653.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/131046/pexels-photo-131046.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/302515/pexels-photo-302515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/301682/pexels-photo-301682.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
					<figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" /></figure>
		</div>
	</div>
</section>

/* 3D Slideshow */ 
* {
	margin: 0;
	padding: 0;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: #6adecd;
}

#slideshow {
	margin: 0 auto;
	padding-top: 50px;
	height: 600px;
	width: 100%;
	background-color: #6adecd;
	box-sizing: border-box;
}

.slideshow-title {
	font-family: 'Allerta Stencil';
	font-size: 62px;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	margin-top: 25%;
	letter-spacing: 3px;
	font-weight: 300;
}

.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 190px;
	perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.content-carrousel {
	width: 100%;
	position: absolute;
	float: right;
	animation: rotar 15s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure {
	width: 100%;
	height: 120px;
	border: 1px solid #3b444b;
	overflow: hidden;
	position: absolute;
}

.content-carrousel figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
	transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
	transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
	transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
	transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
	transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
	transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
	transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(300px); 
}

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
	image-rendering: auto;
	transition: all 300ms;
	width: 100%;
	height: 100%;
}

.content-carrousel img:hover {
	transform: scale(1.2);
	transition: all 300ms;
}

@keyframes rotar {
	from {
		transform: rotateY(0deg);
	} to {
		transform: rotateY(360deg);
	}
}

36

3D Slider | Pure CSS

By: pixeldev

36

Button Hover Effect

By: pixeldev

<main>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg">
      <h3>1) All of These Headlines Are Not Exactly The Same</h3>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg">
      <h3>2) Some Are Short</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg">
      <h3>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h3>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P1-Food_with_love.jpg">
      <h3>4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.</h3>
      <p>By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Beautiful_Chaldean_Food_for_Everyone.jpg">
      <h3>5) Look At That</h3>
      <p>Doesn't that look yummy?</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Birds_on_stick_Shanghai_Qibao.jpg">
      <h3>6) See how this layout is broken?</h3>
      <p>That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Restaurant_food_Kunming_Yunnan.jpg">
      <h3>7) The New CSS Will Fix Things</h3>
      <p>Finally we get some real hammers.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Bunter_Teller.jpg">
      <h3>8) Several Kinds of Hammers</h3>
      <p>Grid, Flexbox, Alignment, Shapes, .</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P3-Egyptian_food_Koshary.jpg">
      <h3>9) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Mexican_food.jpg">
      <h3>10) All of These Headlines</h3>
      <p>Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.</p>
    </article>
    <article>    
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P2-Arepitas_Food_Macro.jpg">
      <h3>11) Are Exactly the Same</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Ravenna_food.jpg">
      <h3>12) Size, Isn't That Magical!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p> 
    </article>
</main>

35

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	--spd: 2s; /* change speed */	
	--u: 0.4vmin;
	--r1: calc(var(--u) * 4);
	--r2: calc(var(--u) * 4.1);
	--r3: calc(var(--u) / 12);
	--r4: calc(var(--u) / 2.5);
	--r5: calc(var(--u) / 2.25);
	--r6: calc(var(--u) / 2);
	--c0: #1a1a1a;
	--c1: #1c1c1c;
	--c2: #404040;
	--c3: #525252;
	--c4: #808080;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
	--border-fix: var(--c0) 0 25%, #fff0 0 100%;
	--screw1: var(--c4) var(--r3), #fff0 var(--r4);
	--screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6);
	--hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%;
	--hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%;
	--hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%;
	height: 100vh;
	background: /* border fix */ conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp), /* screws */ radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp), radial-gradient(circle at 99.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 17%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 17%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 67.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 68%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 31.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 32%, var(--screw2)) var(--gp), /* holes */ radial-gradient(circle at 100% 50%, var(--hole1)) var(--gp), radial-gradient(circle at 98% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 102% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 0% 50%, var(--hole1)) var(--gp), radial-gradient(circle at -2% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 2% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 100%, var(--hole1)) var(--gp), radial-gradient(circle at 48% 98%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 102%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 0%, var(--hole1)) var(--gp), radial-gradient(circle at 48% -2%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 2%, var(--hole3)) var(--gp), /*background*/ linear-gradient(0deg, var(--c2) 33%, #ffffff20 55% 65%, var(--c3) 70% );
	background-color: var(--c2);

}

body:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #fff0 0 41.35%, #585858 41.55% 44%, #0e0e0e 44%, #1c1c1c 50%, #0e0e0e 56%, #494949 56% 58.425%, #fff0 58.475% 100%);
	background: linear-gradient(180deg, #fff0 0 41.5%, #585858 41.6% 44%, #0e0e0e 44%, #1c1c1c 45% 55%, #0e0e0e 56%, #494949 56% 58.55%, #fff0 58.6% 100%);
}

.content {
	width: 100vmin;
	height: 100vmin;
}

.content:before {
	content: "";
	width: 70vmin;
	height: 70vmin;
	position: absolute;
	left: calc(50% - 35vmin);
	border-radius: 100%;
	top: calc(50% - 35vmin);
	box-shadow: 0.5vmin 0.5vmin 1vmin #0a0a0a, -0.5vmin -0.5vmin 1vmin #222;
}

.door {
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #000, #0b102e);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	clip-path: circle(35.4% at 50% 50%);
}

.door:before {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	left: -50%;
	background-image: 
		repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .004%, transparent .074%), 
		radial-gradient(ellipse at 20% 30%, #80008030, #80008020, #ffa50030, #fff0, #fff0);
	animation: spin 500s linear 0s infinite;
	border-radius: 100%;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

.door:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 222;
	box-sizing: border-box;
	border-radius: 100%;
	background: radial-gradient(#fff0 0 40%, #858585 calc(40% + 1px), #686868 43% 46% , #484848 50%, #3330 calc(50% + 1px) 100%);
	filter: drop-shadow(-2px -2px 5px #0009);
	box-shadow: -5vmin -5vmin 5vmin 10vmin #222 inset, 5vmin 5vmin 5vmin 10vmin #cdcdcd inset;
}

body:hover .panel {
	animation-duration: 1s;
}

.panel {
	--p: #999999;
	--p1: #787878;
	--p2: #4e4e4e;
	--rin: var(--p2) 0 0.5vmin, var(--p1) calc(0.5vmin + 1px) 0.75vmin, var(--p2) calc(0.75vmin + 1px) 1.25vmin, #f000 calc(1.25vmin + 1px) 100%;
	--con: var(--p2) 0 60deg, #fff0 0 100%;
	--lin: #fff0 33%, var(--p1) calc(33% + 1px), #fff0 calc(33% + 2px);
	animation: start1 var(--spd) ease-in-out 0s 1;
	--tri: var(--p2) 0deg, var(--p) 30deg, var(--p2) 60deg, #fff0 0 100%;
	--rad: #999999 0, #434343 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%;
	width: 57.5%;
	height: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: all 2s ease 0s;
	filter: drop-shadow(0px 0px 1px #222);
	background: linear-gradient(120deg, var(--lin)), radial-gradient(circle at 50% 4.75vmin, var(--rin)), radial-gradient(circle at 50% 5%, var(--rad)), conic-gradient(from 150deg at 50% 7%, var(--tri)), conic-gradient(from 150deg at 50% 0%, var(--p2) 0 60deg, #fff0 0 100%);

}

.panel:nth-child(2) {
	background: 
		linear-gradient(60deg, var(--lin)),
		radial-gradient(circle at 3.55vmin 2.35vmin, var(--rin)),  
		radial-gradient(circle at 3% 2.5%, var(--rad)),
		conic-gradient(from 90deg at 5% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	left: 64.5%;
	top: 25%;
	animation-name: start2;
}

.panel:nth-child(3) {
	background: 
		linear-gradient(0deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 3.55vmin 95.5%, var(--rin)), 
		radial-gradient(circle at 3% 98%, var(--rad)),
		conic-gradient(from 30deg at 5% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	left: 35.5%;
	top: -25%;
	animation-name: start3;
}

.panel:nth-child(4) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		radial-gradient(circle at 50% 91%, var(--rin)), 	
		radial-gradient(circle at 50% 96%, var(--rad)),
		conic-gradient(from -30deg at 50% 93%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	top: 0;
	left: -7.75%;
	animation-name: start4;
}
.panel:nth-child(5) {  
	background: 
		linear-gradient(-120deg, var(--lin)),
		radial-gradient(circle at 93.5% 95%, var(--rin)), 		
		radial-gradient(circle at 97% 98%, var(--rad)),
		conic-gradient(from 270deg at 95% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 25%;
	left: -22.25%;
	animation-name: start5;
}

.panel:nth-child(6) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		linear-gradient(180deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 93.5% 5%, var(--rin)), 	
		radial-gradient(circle at 97% 2.5%, var(--rad)),
		conic-gradient(from 210deg at 95% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--p2) 60deg, #fff0 0 100%);
	top: 75%;
	left: 7%;
	animation-name: start6;
}

.door:hover .panel:nth-child(1) {
	left: calc(50% - 28.75% );
}

.door:hover .panel:nth-child(2) {
	left: 50%;
	top: 50%;
}

.door:hover .panel:nth-child(3) {
	left: 50%;
	top: 0;
}

.door:hover .panel:nth-child(4) {
	left: calc(50% - 28.75%);
	top: 0;
}

.door:hover .panel:nth-child(5) {
	top: 0;
	left: -7.65%;
}

.door:hover .panel:nth-child(6) {
	left: -7.5%;
	top: 50%;	
}

@keyframes start1 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: 50%; }
}

@keyframes start2 {
	0% { top: 50%; left: 50%; }
	100% { top: 25%; left: 64.5%; }
}

@keyframes start3 {
	0% { top: 0;    left: 50%; }
	100% { top: -25%; left: 35.5%; }
}

@keyframes start4 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: -7.75%; }
}

@keyframes start5 {
	0% { top: 0;   left: -7.65%; }
	100% { top: 25%; left: -22.25%; }
}

@keyframes start6 {
	0% { top: 50%; left: -7.5%; }
	100% { top: 75%; left: 7%; }
}

35

Iris Door (hexagonal) – Pure CSS

By: pixeldev

35

Expanding Pure CSS Button

By: pixeldev

body{
  background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
  background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:-315px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
#shadow{
  width:600px;
  height:30px;
  margin:330px auto 0;
  border-radius:50%;
  box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}

35

Pure CSS with no arrows

By: pixeldev

body {
    background: #282828; /* #492540/* #282828; */
}

#grid {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 0; /* Clears unordered list default of 40px */
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
#grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    background: fd005f;
    visibility: hidden;
    overflow: hidden;
}
#grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdbf00;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
}
#grid li * {
    visibility: visible;
}
#grid li:nth-child(3n+2) {
  margin: 0 1%;
}
#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}

All

Hexagon button with pure CSS

By: pixeldev

Glowing Loader Ring Animation

By: pixeldev

Image accordion slider (pure CSS) 2

By: pixeldev

Pure CSS Slider – fullPage blog

By: pixeldev

3D Slider | Pure CSS

By: pixeldev

Button Hover Effect

By: pixeldev

CSS Grid: Columns (Pure CSS Masonry Layout)

By: pixeldev

Iris Door (hexagonal) – Pure CSS

By: pixeldev

Expanding Pure CSS Button

By: pixeldev

Pure CSS with no arrows

By: pixeldev

Pure CSS Hexagonal Grid

By: pixeldev

Three Hexagons Using Pure CSS

By: pixeldev