The Power of Pure CSS - No JavaScript Needed

51

Pure CSS Automatic Slide Carousel

By: pixeldev

<div class="accordion">
	<div class="accordion-collapse" id="instagram">
		<a href="#instagram" class="instagram">
			<i class="fab fa-instagram"></i>instagram
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>instagram</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="twitter">
		<a href="#twitter" class="twitter">
			<i class="fab fa-twitter"></i>twitter
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>twitter</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="dribble">
		<a href="#dribble" class="dribble">
			<i class="fab fa-dribbble"></i>dribble
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>dribble</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="youtube">
		<a href="#youtube" class="youtube">
			<i class="fab fa-youtube"></i>youtube
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>youtube</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
</div>

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  background: linear-gradient(to bottom right, #ccc 80%, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

a {
  text-decoration: none;
  color: #333;
}

.accordion {
  width: 50vw;
}

.accordion-collapse {
  background: #fff;
}

.accordion-collapse:target .accordion-collapse-content {
  height: 15rem;
}

.accordion-collapse:target a::before {
  transform: translateY(-50%) rotate(-90deg);
}

.accordion-collapse:not(:first-child) a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.accordion-collapse a {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  padding: 2rem;
  position: relative;
}

.accordion-collapse a::before {
  content: "";
  border-top: 0.7rem solid #fff;
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  transition: transform 500ms ease-in-out;
}

.accordion-collapse a i {
  margin-right: 0.5rem;
}

.accordion-collapse a.instagram {
  background: #db2e7d;
}

.accordion-collapse a.twitter {
  background: #1dabdd;
}

.accordion-collapse a.dribble {
  background: #444;
}

.accordion-collapse a.youtube {
  background: #ff0000;
}

.accordion-collapse-content {
  height: 0;
  overflow: hidden;
  transition: height 500ms cubic-bezier(0.175, 0.685, 0.32, 1.275);
}

.accordion-collapse-content .inner-content {
  padding: 2rem;
}

.accordion-collapse-content h3 {
  font-size: 1.8rem;
  text-transform: capitalize;
}

/* Media Queries */
@media screen and (max-width: 778px) {
  .accordion {
    width: 80vw;
  }

.accordion-collapse:target .accordion-collapse-content {
    height: 17rem;
  }
}

@media screen and (max-width: 530px) {
  .accordion {
    width: 95vw;
  }

.accordion-collapse:target .accordion-collapse-content {
    height: 25rem;
  }
}

51

Pure css accordion with bounce effect

By: pixeldev

<header id="head">
	<div class="container">
    	<nav id="menu">
    		
    		<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
    		
    		<div class="box">
	    		<ul>
	    			<li><a href="#"><i class="icon-home"></i> home</a></li>
	    			<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
	    			<li><a href="#"><i class="icon-copy"></i> works</a></li>
	    			<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
	    		</ul>
    		</div>
    		
    	</nav>
	</div>
</header>

<section id="content">
	<div class="container">
		<h1>Pure CSS Navigation Overlay</h1>
		<p>Nisi pellentesque placerat penatibus montes ridiculus ridiculus! Penatibus porttitor, augue? Odio sed, elementum, in nisi ultricies enim? Risus scelerisque placerat et elementum odio dictumst. Scelerisque phasellus, sit in diam odio lectus porta, vel duis pid nisi! Eu eros! Sit non aenean enim hac egestas ultrices, et pulvinar sed, arcu et, arcu vel tortor turpis, phasellus lundium turpis turpis hac eros, auctor dignissim ut facilisis, est? Duis odio magnis? Aenean ultrices, mattis placerat adipiscing cum adipiscing ut, scelerisque augue in massa, pulvinar augue! Amet rhoncus arcu phasellus integer adipiscing tristique facilisis! Adipiscing sed ac turpis scelerisque nunc sit tempor turpis ultricies egestas adipiscing magnis sit augue et pulvinar sociis, urna in, aliquam sagittis dictumst</p>
		<p>Aliquam cum, auctor habitasse, elementum tempor et sit, urna integer. Dictumst, turpis penatibus magnis integer placerat adipiscing aliquam, sit rhoncus ut et, integer elementum tempor nisi nec facilisis, nec phasellus. Nisi odio lundium, eu rhoncus massa vut lacus magna mauris magnis! Eu tempor hac ac turpis eros tristique est pellentesque ac nascetur nascetur urna, placerat vel eu vel, dictumst amet. Pulvinar arcu odio, cursus, ridiculus nisi tempor sagittis amet platea? Vel mus quis nunc sed quis! Sagittis habitasse elementum ac rhoncus rhoncus amet nunc et? Phasellus! Phasellus urna, et aliquet diam sociis egestas duis? Porta lundium velit nisi nec, massa porta dolor nunc, mid lorem sit magnis montes. Vel nisi, elementum vut! Nisi nisi habitasse integer! Dolor sed.</p>
	</div>
</section>

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

* { padding: 0px; margin: 0px; border: 0px; outline: 0px; }		/* fast reset */

body { 
	font-family: 'Merriweather Sans', Arial, sans-serif;
	font-size: 12px; 
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
	position: fixed;
	text-align: center;
	overflow: hidden;
	z-index: -1;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu ul {
	position: relative;
	top: 20%;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out;
}

#menu li { 
	display: inline-block; 
	margin: 20px;
}

#menu li a {
	border-radius: 3px;
	padding: 15px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 18px;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
}

#menu li a:hover { border-color: #fff; }

#menu li a i { 
	margin-right: 5px; 
	font-size: 24px;
}

#toggle-nav-label {
	color: rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.2);
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	display: block;
	cursor: pointer;
	position: relative;
	z-index: 500;
	width: 30px;
	height: 30px;
	border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box { 
	opacity: 1;
	z-index: 400;
}

#toggle-nav:checked ~ .box ul {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label { 
	background: #fff; 
	color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
	margin-bottom: 20px;
	font-size: 30px;
}

#content p {
	font-size: 14px;
	line-height: 150%;
	margin-bottom: 20px;
}

51

Pure CSS Navigation Overlay

By: pixeldev

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

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

height: 100vh;
    background: #222;
}
.btn{
    --light-color: rgb(69, 252, 151);
    margin: 1rem;
    position:relative;
    appearance: none;
    border: none;
    color: rgb(209, 208, 208);
    padding: 1rem 2rem;
    background-color: #3e3e3e;
    z-index: 2;
    overflow: hidden;
    border-radius: .4rem;
  box-shadow: .5rem .5rem  .5rem #0005;
  transition: .3s;
}

.btn::before{
    position: absolute;
    width: 10rem;
    height: 10rem;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, transparent 0%, transparent 14%, transparent 35%, var(--light-color) 80%, var(--light-color) 100%);
    content: '';
    top: 50%;
    left: 50%;
    transform-origin: bottom center ;
    transform: translate(-50%, -100%) ;
    z-index: -3;
    border-radius: 100%;
    
    animation: button_light_effect 5s linear infinite;
}
.btn_orange::before{animation-delay:.1s;}
.btn_blue::before{animation-delay:.3s;}
.btn_yellow::before{animation-delay:.6s;}
.btn::after{
    position: absolute;
    width: calc(100% - .3rem);
    height: calc(100% - .3rem);
    background-color: #3e3e3e;
    content: '';
    top: 50%;
    left: 50%;
    border-radius: .4rem;
    transform: translate(-50%, -50%);
    z-index: -3;
    transition:  1s ;
}
.btn:hover{
  transform:scale(1.2);
}
.btn:hover, .btn:hover::after {
    cursor: pointer;
    background: #55606a;
    
}
.btn:hover::before{
    animation-duration: .5s;
    
}
.btn_orange{--light-color:rgb(255, 166, 0);}
.btn_blue{--light-color:rgb(0, 183, 255);}
.btn_yellow{--light-color:rgb(235, 255, 16);}
.btn_pink{--light-color:rgb(255, 0, 200);}

@keyframes button_light_effect {
    0%{transform: translate(-50%, -100%) rotate(-180deg);}
    100%{transform: translate(-50%, -100%) rotate(180deg);}
}

51

Animated Button

By: pixeldev

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

body {
  background-color: #3A3033;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #70B7CC;
}

.container--c-0 {
  background: #3A3033;
}

.icon {
  position: relative;
  width: 240px;
  height: 240px;
  animation: delayIn 1s ease-in 1;
}

@media screen and (max-width: 400px) {
  .icon {
    width: 180px;
    height: 180px;
  }
}

.sun {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  animation: raySpin 20s linear infinite;
}

.sun::before {
  display: block;
  content: '';
  position: absolute;
  z-index: -200;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  transform: scale(0.9);
  animation: blastIn .35s ease-in-out 1;
  pointer-events: none;
}

.sun::after {
  display: block;
  content: '';
  position: absolute;
  z-index: -100;
  width: 100%;
  height: 100%;
  background: #FFF031;
  border-radius: 50%;
  pointer-events: none;
}

.sun:hover::before {
  animation: blastOut .5s ease-in-out 1;
}

.sun:hover::after {
  animation: bounce .5s ease-in-out 1;
}

.sun__rays {
  position: absolute;
  z-index: -400;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  transform: scale(0.5);
  animation: raysIn .5s ease-in-out 1 forwards;
  pointer-events: none;
}

.sun:hover .sun__rays {
  animation: raysOut .5s ease-in-out 1 forwards;
}

.sun__ray {
  position: absolute;
  left: 50%;
  width: 2%;
  height: 100%;
  margin-left: -1%;
}

.sun__ray:nth-of-type(2) { transform: rotate(20deg); }
.sun__ray:nth-of-type(3) { transform: rotate(40deg); }
.sun__ray:nth-of-type(4) { transform: rotate(60deg); }
.sun__ray:nth-of-type(5) { transform: rotate(80deg); }
.sun__ray:nth-of-type(6) { transform: rotate(80deg); }
.sun__ray:nth-of-type(7) { transform: rotate(100deg); }
.sun__ray:nth-of-type(8) { transform: rotate(120deg); }
.sun__ray:nth-of-type(9) { transform: rotate(140deg); }
.sun__ray:nth-of-type(10) { transform: rotate(160deg); }

.sun__ray::before,
.sun__ray::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 10%;
  background: rgba(255, 255, 255, 0.4);
}

.sun__ray::before {
  top: 0;
}

.sun__ray::after {
  bottom: 0;
}

/* Animations */
@keyframes blastOut {
  0% { transform: scale(0.9); opacity: .6; }
  100% { transform: scale(10); opacity: 0; }
}

@keyframes blastIn {
  0% { transform: scale(10); opacity: 0; }
  30% { opacity: 0.1; }
  100% { transform: scale(0.9); opacity: 0; }
}

@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes raysOut {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@keyframes raysIn {
  0% { transform: scale(1); }
  100% { transform: scale(0.5); }
}

@keyframes raySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359.999deg); }
}

@keyframes delayIn {
  0% { transform: scale(0); }
  50% { transform: scale(0); }
  100% { transform: scale(1); }
}

51

Pure CSS Animated Weather Icon Hover

By: pixeldev

50

Pure CSS Masonry grid layout

By: pixeldev

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

50

Single Element Absolute Center Overlay Spinner

By: pixeldev

50

Pulsating heart

By: pixeldev

50

Border Style

By: pixeldev

50

Table fixed first column, pure css

By: pixeldev

.carousel-wrapper {
  width: 520px; /* 400px * 1.3 */
  height: 350px; /* 250px * 1.4 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px; /* 400px * 3 */
  animation: sliding 12s infinite;
}

.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive: max-width 768px */
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px; /* 240px * 1.3 */
    height: 210px; /* 150px * 1.4 */
  }

.carousel-container {
    width: 240px;
    height: 150px;
  }

.carousel {
    width: 720px; /* 240px * 3 */
  }

.carousel div {
    width: 240px;
    height: 150px;
  }

@keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

50

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.15rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0cf;
  border-radius: 10rem;
  z-index: -2;
}

.button:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #0099cc; /* manually darkened #0cf */
  transition: all 0.3s;
  border-radius: 10rem;
  z-index: -1;
}

.button:hover {
  color: #fff;
}

.button:hover:before {
  width: 100%;
}

/* Optional reset for presentation */
* {
  font-family: Arial;
  text-decoration: none;
  font-size: 20px;
}

.container {
  padding-top: 50px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

h1 {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  color: #777;
}

50

All

Pure CSS Automatic Slide Carousel

By: pixeldev

Pure css accordion with bounce effect

By: pixeldev

Pure CSS Navigation Overlay

By: pixeldev

Animated Button

By: pixeldev

Pure CSS Animated Weather Icon Hover

By: pixeldev

Pure CSS Masonry grid layout

By: pixeldev

Single Element Absolute Center Overlay Spinner

By: pixeldev

Pulsating heart

By: pixeldev

Border Style

By: pixeldev

Table fixed first column, pure css

By: pixeldev

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

Pure Css Button Hover effect

By: pixeldev