The Power of Pure CSS - No JavaScript Needed

<title>Accordian</title>
  
  
<div class="collapse-content">
	<div class="collapse" id="instagram">
		<a class="instagram" href="#instagram"><i class="fab fa-instagram"></i> Instagram</a>
      	<div class="content">
         	<div class="inner-content">
            	<h3>Instagram</h3>
              	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!
          	</div>
        	</div>
      </div>
  
<div class="collapse" id="twitter">
	<a class="twitter" href="#twitter"><i class="fab fa-twitter"></i> Twitter</a>
   	<div class="content">
      	<div class="inner-content">
         	<h3>Twitter</h3>
            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!
			</div>
	</div>
</div>
  
<div class="collapse" id="dribbble">
	<a class="dribbble" href="#dribbble"><i class="fab fa-dribbble"></i> Dribble</a>
		<div class="content">
			<div class="inner-content">
            <h3>Dribbble</h3>
            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!
          </div>
	</div>
</div>
      
<div class="collapse" id="youtube">
	<a class="youtube" href="#youtube"><i class="fab fa-youtube"></i> Youtube</a>
		<div class="content">
      	<div class="inner-content">
            <h3>Youtube</h3>
            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!
				</div>
		</div>
</div>
  
</div>

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  list-style: none;
  text-decoration: none;
}

body {
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom right, #114357 60%, #f29492);
  line-height: 1.6;
}

.collapse-content {
  width: 50vw;
  margin: auto;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.collapse {
  background: #fff;
}

.collapse a {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 1.8rem;
  color: #fff;
  position: relative;
}

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

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

.collapse a.dribbble {
  background: #444;
}

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

.collapse a:before {
  content: "";
  border-top: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 25px;
  right: 30px;
}

.inner-content {
  padding: 1.8rem;
}

.content {
  max-height: 0em;
  transition: 0.3s linear 0s;
  overflow: hidden;
}

.collapse + .collapse a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

h3 {
  margin-bottom: 15px;
}

.collapse:target .content {
  max-height: 15em;
}

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

@media (max-width: 768px) {
  .collapse-content {
    width: 80vw;
    margin: auto;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  }
}
@media (max-width: 425px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 1.2rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}
@media (max-width: 320px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 0.8rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}

33

Collapsing Accordion Pure CSS

By: pixeldev

33

Line Animation

By: pixeldev

33

Ringing call pluse animation

By: pixeldev

.codepen-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.book {
  height: 15rem;
  width: 15rem;
  font-size: 1.4rem;
  box-shadow: 1rem 2rem 3rem rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  color: #484e4a;
}

.page {
  width: 100%;
  height: 15rem;
  perspective: 1500px;
  position: relative;
}

/* Front of first page */
.page__1 {
  background-color: #0D5C63;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 1s 0.3s;
  transform-origin: 0 50%;
  z-index: 2;
}

/* Back of first page */
.page__1::after {
  content: "Neat, huh?";
  color: #eff0eb;
  position: absolute;
  padding-top: 1.5rem;
  top: 0;
  left: 0;
  background-color: #424B54;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 0.3s 0.5s;
}

/* Front of second page */
.page__2 {
  background-color: #BAA898;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

/* Hover effect for flipping the page */
.page:hover .page__1 {
  transform: rotateY(-180deg);
  box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, 0.25);
}

/* Hover effect for back of first page */
.page:hover .page__1::after {
  opacity: 1;
}

32

Pure CSS Card Open Animation

By: pixeldev

/* common css */
body {
	margin: 0;
	padding: 0;
	background: #262626;
}

h2 {color: #fff; text-align: center;}

/* button hover amazing effect */
a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	/* line-height: 2; */
	color: #ff0;
	font-size: 30px;
	font-family: verdana;
	letter-spacing: 4px;

/* use combination of any two */
	/* 1. */
	/* padding: 5px; */

/* 2. */
	padding-left: 5px;
	/* padding-right: 5px; */
}

a::before,
a::after,
span::before,
span::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background: transparent;
	transition: 1s;
	/* -webkit-mix-blend-mode: hue; */
}

a::before {
	top: -2px;
	left: -2px;
	border-top: 2px solid #ff0;
	border-left: 2px solid #ff0;
}
a::after {
	top: -2px;
	right: -2px;
	border-top: 2px solid #ff0;
	border-right: 2px solid #ff0;
}

span::before {
	bottom: -2px;
	left: -2px;
	border-bottom: 2px solid #ff0;
	border-left: 2px solid #ff0;
}
span::after {
	bottom: -2px;
	right: -2px;
	border-bottom: 2px solid #ff0;
	border-right: 2px solid #ff0;
}

a:hover::before,
a:hover::after,
a:hover span::before,
a:hover span::after  {
	width: calc( 180px / 2);
	height: calc( 50px / 2);
}

32

Cool Css Button Border Animation On Hover – CSS3 Hover Effects – Pure CSS

By: pixeldev

32

Hexagon to Square

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

32

Glowing Loader Ring Animation

By: pixeldev

31

Pure CSS Nav Menu challenge

By: pixeldev

<div class="first hero">
  <img class="hero-profile-img" src="https://res.cloudinary.com/dgohpzc2f/image/upload/f_auto,q_auto/Leona_0_fc3odg.jpg" alt="">
  <div class="hero-description-bk"></div>
  <div class="hero-logo">
    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
  </div>
  <div class="hero-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="hero-date">
    <p>20.02.2019</p>
  </div>
  <div class="hero-btn">
    <a href="#">Learn More</a>
  </div>
</div>

<div class="second hero">
  <img class="hero-profile-img" src="https://i.pinimg.com/originals/9f/b1/ff/9fb1ffb05dd28039d1a06ad8e90cbd75.jpg" alt="">
  <div class="hero-description-bk"></div>
  <div class="hero-logo">
    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
  </div>
  <div class="hero-description">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="hero-date">
    <p>20.02.2019</p>
  </div>
  <div class="hero-btn">
    <a href="#">Learn More</a>
  </div>
</div>

/* BEGIN CARD DESIGN */
.hero {
  display: inline-block;
  position: relative;
  width: 400px;
  min-width: 400px;
  height: 400px;
  border-radius: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
  margin: 30px;
}

.hero-profile-img {
  height: 70%;
}

.hero-description-bk {
  background-image: linear-gradient(0deg , #3f5efb, #fc466b);
  border-radius: 30px;
  position: absolute;
  top: 55%;
  left: -5px;
  height: 65%;
  width: 108%;
  transform: skew(19deg, -9deg);
}

.second .hero-description-bk {
  background-image: linear-gradient(-20deg , #bb7413, #e7d25c)
}

.hero-logo {
  height: 80px;
  width: 80px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  bottom: 30%;
  left: 30px;
  overflow:hidden;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.7);
}

.hero-logo img {
  height: 100%;
}

.hero-description {
  position: absolute;
  color: #fff;
  font-weight: 900;
  left: 150px;
  bottom: 26%;
}

.hero-btn {
  position: absolute;
  color: #fff;
  right: 30px;
  bottom: 10%;
  padding: 10px 20px;
  border: 1px solid #fff;
}

.hero-btn a {
  color: #fff;
}

.hero-date {
  position: absolute;
  color: #fff;
  left: 30px;
  bottom: 10%;
}
/* END CARD DESIGN */

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #eee;
  min-height: 100vh;
}
.btn i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}

31

Modern css cards design

By: pixeldev

31

infinite logo carousel with pure CSS

By: pixeldev

@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Overpass+Mono");

:root {
  --purple: #892a92;
  --purple2: #70217a;
  --white: #f6d3fd;
  --height: 222px;
  --width: 350px;
  --font: "Overpass Mono", monospaced;
  --masterFont: "Raleway", sans-serif;
}

body {
  --baseColor: #c2e59c;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--baseColor);
  background: linear-gradient(to right, #64b3f4, var(--baseColor));
}

.card {
  --heightCalc: -calc((var(--height) / 2) - 10px);
  --widthCalc: calc(var(--width) / 2);
  height: var(--height);
  width: var(--width);
  min-width: var(--width);
  background: linear-gradient(90deg, var(--purple), var(--purple2));
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 10px auto;
  position: relative;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.6));
  transform: translateY(calc(50% - 10px));
}

.card__figure {
  position: relative;
  height: 40px;
  margin: 0;
}

.card__figure::after {
  content: "PLATINUM";
  font-size: 0.45em;
  letter-spacing: 4px;
  color: var(--white);
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: calc(-100% - 15px);
}

.card__figure--logo {
  --widthLogo: 130px;
  width: var(--widthLogo);
  position: absolute;
  right: 50%;
  transform: translate(calc(var(--widthLogo) / 2), 20px);
}

.card__reader {
  width: 50px;
  height: 40px;
  background: radial-gradient(#d9a56c, #b18457);
  border-radius: 5px;
  position: absolute;
  top: 50%;
  transform: translate(33px, -40px);
  overflow: hidden;
}

.card__reader--risk {
  width: 50px;
  height: 40px;
  border-radius: 13px;
  background: transparent;
  border: 1px solid #666;
  position: absolute;
  z-index: 0;
}

.card__reader--risk-one {
  transform: translate(37px, 15px);
}

.card__reader--risk-two {
  transform: translate(15px, 30px);
}

.card__reader--risk-three {
  transform: translate(-37px, -15px);
}

.card__reader--risk-four {
  transform: translate(-15px, -30px);
}

.card__number {
  font-family: var(--font);
  font-size: 1.15em;
  font-weight: normal;
  color: var(--white);
  letter-spacing: 2.5px;
  text-align: center;
  margin-left: -20px;
  margin-top: 80px;
  z-index: 1;
  position: relative;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__number::before,
.card__number::after {
  font-family: Arial;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.4em;
  position: absolute;
  letter-spacing: 0px;
}

.card__number::before {
  content: "5032";
  transform: translate(15px, 22px);
}

.card__number::after {
  content: "Valid thru";
  width: 80px;
  transform: translate(-215px, 22px);
}

.card__dates {
  position: absolute;
  width: 40%;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
  color: var(--white);
  font-family: var(--font);
  bottom: 22%;
  transform: translate(60px, 0px);
}

.card__dates span {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__name {
  font-family: var(--font);
  font-size: 0.9em;
  font-weight: normal;
  color: var(--white);
  letter-spacing: 2.5px;
  transform: translate(35px, 25px);
  position: relative;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.card__flag {
  right: 30px;
  top: 45%;
  border-radius: 25px;
  transform: translate(0, -28px);
  position: absolute;
  height: 110px;
  width: 80px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.card__flag--globe {
  --margin: 5px;
  width: calc(100% - (var(--margin) * 2));
  background-color: #b7b2b8;
  height: 50%;
  border-radius: 20px;
  margin: var(--margin);
  background: repeating-linear-gradient(
    0deg,
    #dbd1dc,
    #dbd1dc 5px,
    #b2aab5 7px,
    #b2aab5 5px
  );
}

.card__flag--globe::after,
.card__flag--globe::before {
  content: "\f0ac";
  font-family: FontAwesome;
  color: rgba(0, 0, 0, 0.2);
  font-size: 3em;
  top: 6px;
  left: 2px;
  position: absolute;
}

.card__flag--globe::after {
  transform: translateX(10px);
}

.card__flag--globe::before {
  transform: translateX(25px);
}

.card__flag--red {
  position: absolute;
  left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ce0e1d;
}

.card__flag--yellow {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e39833;
}

.card__flag--yellow::after {
  content: "MasterCard";
  position: absolute;
  font-size: 0.7em;
  top: 50%;
  transform: translate(-25px, -7px);
  font-family: var(--masterFont);
  font-style: italic;
  font-weight: 800;
  color: var(--white);
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.assign {
  text-align: center;
  margin-top: 113px;
  font-family: var(--masterFont);
  color: #fff;
  font-size: 0.8em;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}

.assign a {
  text-decoration: none;
  font-weight: 700;
  color: #fff;
}

.assign a::hover {
  color: var(--purple);
}

29

Pure CSS Credit Card

By: pixeldev

@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

/*
 FORMATTING FOR CODEPEN
*/

html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: 'Open Sans Condensed', sans-serif;
}

.col {
  height: 100%;
}

div[class*=container] {
  text-align: center;
  width: 100%;
  height: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-1 { background: #333; }
.container-2 { background: #4E598C; }
.container-3 { background: #8499B1; }
.container-4 { background: #9888A5; }
.container-5 { background: #7B6D8D; }
.container-6 { background: #565554; }

/*
 BUTTON STYLING
*/

.btn {
  position: relative;
  color: white;
  width: 256px;
  height: 64px;
  line-height: 64px;
  transition: all 0.3s;
  span {
    transition: all 0.3s;
    tranform: scale(1, 1);
  }
}

.btn::before, .btn::after {
  content: '';
  position: absolute;
  transition: all 0.3s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.btn-one::before {
	left: 4px;
	z-index: 1;
  
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 1);
}

.btn-one:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-one::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-one:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* BTN TWO */
.btn-two::before, .btn-two::after {
  content: '';
  position: absolute;
  width: 100%;
	height: 100%;
  bottom: 0;
	left: 0;
	z-index: 1;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-two:hover::after {
  animation-name: rotatecw;
  animation-duration: 2s;
}
.btn-two:hover::before {
  animation-name: rotateccw; 
  animation-duration: 3s;
}
.btn-two:hover::after, .btn-two:hover::before {
  left: 96px;
  width: 64px;
  
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatecw {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes rotateccw {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}

/* BTN THREE */
.btn-three::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1, 0.1);
}

.btn-three:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-three::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-three:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* BTN FOUR */

.btn-four:hover span {
  transform: scale(1.2, 1.2);
}

.btn-four::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
}

.btn-four:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-four::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-four:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

/* BTN FIVE */
.btn-five::before {
  transition: transform 0.15s, 0.15s border-radius 0.15s;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.1, 0.1);
  border-radius: 50%;
}

.btn-five:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: 0;
}

.btn-five::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-five:hover::after {
  opacity: 0;
}

/* BTN SIX */
.btn-six::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.3, 1.3);
}

.btn-six:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.btn-six::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-six:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

27

All

Collapsing Accordion Pure CSS

By: pixeldev

Line Animation

By: pixeldev

Ringing call pluse animation

By: pixeldev

Pure CSS Card Open Animation

By: pixeldev

Cool Css Button Border Animation On Hover – CSS3 Hover Effects – Pure CSS

By: pixeldev

Hexagon to Square

By: pixeldev

Glowing Loader Ring Animation

By: pixeldev

Pure CSS Nav Menu challenge

By: pixeldev

Modern css cards design

By: pixeldev

infinite logo carousel with pure CSS

By: pixeldev

Pure CSS Credit Card

By: pixeldev

Six Pure CSS Button Hover Animations

By: pixeldev