The Power of Pure CSS - No JavaScript Needed

<title>Responsive Tables</title>

<section>
    <ol class="collection collection-container">
      
      <li class="item item-container">
        <div class="attribute"></div>
        <div class="attribute" data-name="#">#</div>
        
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">Part Number</div>
            <div class="attribute" data-name="Part Description">Part Description</div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute">Vendor Number</div>
            <div class="attribute">Vendor Name</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute">Order Qty</div>
          <div class="attribute">Receive Qty</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute">Cost</div>
          <div class="attribute">Extended Cost</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute">Duty %</div>
          <div class="attribute">Duty</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute">Freight %</div>
          <div class="attribute">Freight</div>
        </div>
        <div class="attribute">UOM</div>
        <div class="attribute">Vendor Part Number</div>
      </li>
      
      <li class="item item-container">
        <div class="attribute" data-name="Select"></div>
        <div class="attribute" data-name="#">1</div>
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">100-10001</div>
            <div class="attribute" data-name="Part Description">Description of part</div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute" data-name="Vendor Number">001</div>
            <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute" data-name="Order Qty">10</div>
          <div class="attribute" data-name="Receive Qty">20</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute" data-name="Cost">$5.00</div>
          <div class="attribute" data-name="Extended Cost">$2.00</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute" data-name="Duty %">3.0%</div>
          <div class="attribute" data-name="Duty">$0.15</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute" data-name="Freight %">3.0%</div>
          <div class="attribute" data-name="Freight">$0.15</div>
        </div>
        <div class="attribute" data-name="UOM">EA</div>
        <div class="attribute" data-name="Vendor Part Number">100001</div>
      </li>
      <li class="item item-container">
        <div class="attribute" data-name="Select"></div>
        <div class="attribute" data-name="#">2</div>
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">100-10002</div>
            <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
            </div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute" data-name="Vendor Number">002</div>
            <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute" data-name="Order Qty">10</div>
          <div class="attribute" data-name="Receive Qty">20</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute" data-name="Cost">$5.00</div>
          <div class="attribute" data-name="Extended Cost">$2.00</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute" data-name="Duty %">3.0%</div>
          <div class="attribute" data-name="Duty">$0.15</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute" data-name="Freight %">3.0%</div>
          <div class="attribute" data-name="Freight">$0.15</div>
        </div>
        <div class="attribute" data-name="UOM">EA</div>
        <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
      </li>
    </ol>
</section>

ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

.item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

/* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

.attribute::before {
        content: attr(data-name);
    }

/* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
    }

.attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

/* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 10em;
    }

.part-id {
        --column-width-min: 10em;
    }

.vendor-information {
        --column-width-min: 8em;
    }

.quantity {
        --column-width-min: 5em;
    }

.cost {
        --column-width-min: 5em;
    }

.duty {
        --column-width-min: 5em;
    }

.freight {
        --column-width-min: 5em;
    }

.collection {
        border-top: 1px solid gray;
    }

/* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

.item-container:hover {
        background-color: rgb(200, 227, 252);
    }

/* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

15

Responsive tables with pure CSS using Grid Layout Module

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

15

Pure CSS Navigation Overlay

By: pixeldev

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");

body {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 50px;
  text-align: center;
  font-weight: 300;
  color: #777;
  margin-bottom: 0;
}

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 16px;
  color: #bbb;
}

.icons {
  font-size: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon {
  display: inline-block;
  width: 40px;
  height: 50px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin: 0 5px;
}

.icon::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-radius: 0 2px;
  transition: all 0.2s linear;
  backface-visibility: hidden;
}

/* DOC */
.icon--doc {
  background-color: #4285f4;
}
.icon--doc::after {
  background: linear-gradient(45deg, #669df6 50%, #fff 50%);
}
.icon--doc i::before {
  content: '☰';
}

/* PDF */
.icon--pdf {
  background-color: #db4437;
}
.icon--pdf::after {
  background: linear-gradient(45deg, #e36a60 50%, #fff 50%);
}
.icon--pdf i::before {
  content: '☵';
}

/* SHEETS */
.icon--sheets {
  background-color: #0f9d58;
}
.icon--sheets::after {
  background: linear-gradient(45deg, #39b378 50%, #fff 50%);
}
.icon--sheets i::before {
  content: '⊟';
}

/* SLIDES */
.icon--slides {
  background-color: #f5b707;
}
.icon--slides::after {
  background: linear-gradient(45deg, #f8c53f 50%, #fff 50%);
}
.icon--slides i::before {
  content: '⧉';
}

/* CODE */
.icon--code {
  background-color: #00a78e;
}
.icon--code::after {
  background: linear-gradient(45deg, #26bfa6 50%, #fff 50%);
}
.icon--code i::before {
  content: '< >';
}

.icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font-size: 10px;
  color: #fff;
  font-weight: 500;
}

.icon i::before,
.icon i::after {
  display: block;
  transition: all 0.2s linear;
}

.icon i::before {
  text-align: center;
  font-size: 12px;
  opacity: 0;
  transform: translateY(5px);
}

.icon i::after {
  content: attr(title);
  transform: translateY(-5px);
}

.icon:hover {
  border-radius: 2px 4px 2px 2px;
}

.icon:hover::after {
  width: 12px;
  height: 12px;
}

.icon:hover i::before {
  transform: translateY(0);
  opacity: 1;
}

.icon:hover i::after {
  transform: translateY(0);
}

15

Pure CSS – File icons with hover animation

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

15

Pure CSS Animated Weather Icon Hover

By: pixeldev

:root {
  --bg-color: #fff;
  --wave-color: #2c3e50;
  --animation-time: 8s;
  --max-height: 200px;
  --circle-offset: -1.5%;
  --wave-width: 55%;
  --height-wave-up: 109%;
  --height-wave-down: 100%;
  --top-wave-up: 60%;
  --top-wave-down: 40%;
  --border-radius-right-up: 100% 50%;
  --border-radius-left-up: 50% 100%; 
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--wave-color);
}

.container {
  position: relative;
  height: 50vh;
  background: var(--bg-color);
}

.wave {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--max-height);
  background: var(--bg-color);
  animation: beWavy var(--animation-time) infinite linear;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: var(--border-radius-right-up);
  width: var(--wave-width);
}

.wave::before {
  height: var(--height-wave-up);
  background-color: var(--wave-color);
  right: var(--circle-offset);
  top: var(--top-wave-up);
  animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
  height: var(--height-wave-down);
  background-color: var(--bg-color);
  left: var(--circle-offset);
  top: var(--top-wave-down);
  animation: beWavyAfter var(--animation-time) infinite step-end;
}

@keyframes beWavy {
  0% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  25% {
    animation-timing-function: ease-out;
    height: 0;
  }
  50% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
  75% {
    animation-timing-function: ease-out;
    height: 0;
  }
  100% {
    animation-timing-function: ease-in;
    height: var(--max-height);
  }
}

@keyframes beWavyBefore {
  25% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-right-up);
  }
}

@keyframes beWavyAfter {
  25% {
    background-color: var(--wave-color);
    height: var(--height-wave-up);
    top: var(--top-wave-up);
    border-radius: var(--border-radius-left-up);
  }
  75% {
    background-color: var(--bg-color);
    height: var(--height-wave-down);
    top: var(--top-wave-down);
    border-radius: var(--border-radius-right-up);
  }
}

14

Pure CSS Animated Wave

By: pixeldev

14

Flip Navbar with Pure CSS

By: pixeldev

<li class="body">
     
		<ul class="main">
        
			<li><a><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
        
			<li class="projects"><a><i class="fa fa-tasks" aria-hidden="true"></i>  ANIMATION 1 ↓</a>
				<ul class="ul" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 2 ↓</a>
				<ul class="ul1" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li> 
        
			<li class="about"><a><i class="fa fa-tasks" aria-hidden="true"></i> ANIMATION 3 ↓</a>
				<ul class="ul2" style="margin-left:-20px">
					<li><a>projects 1</a></li>
					<li><a>projects 2</a></li>
					<li><a>projects 3</a></li>
					<li><a>projects 4</a></li>
				</ul>
			</li>

body{
font-family: 'Cormorant Garamond', serif;
font-size:15px;
 font-weight: bold;
}

ul{
position:absolute;
list-style-type:none;
background:#CE93D8;
margin:0px;
padding:0px;
margin-top:-90px;
}

li{
display:inline-block;
padding:20px;
cursor:pointer;
}

a{
text-decoration:none;
color:black;
}

.ul{
position:absolute;
display:none;
background:#b3d4fc;

-webkit-animation:mymove .3s linear ;
}

.ul:hover .ul{
display:block;
}

li ul li:hover a{
color:white;
}

.projects:hover ul{
display:block;
margin-top:20px;
}

.projects:hover .ul li{
display:block;
}

.projects .ul li a{
padding:10px;
color:black;
}

.projects .ul li:hover a{
color:white;
}

li ul li{
transition:all .2s;
}

li ul li:hover{
background:#795548;
}

@-webkit-keyframes mymove {
    0%  {transform:translate3d(0px,50px,0px)}
    
    25% {transform:translate3d(0,0px,0)}
  
   50% {transform:translate3d(0,25px,0)}
  
   100% {transform:translate3d(0,0,0)}
}

div{
background:#80CBC4;

height:70px;
 box-shadow: 
        0px 11px 8px -10px #CCC,
        0px -11px 8px -10px #CCC; 
}
.ul1{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move .3s linear alternate ;
}
.about .ul1 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul1{
display:block;
margin-top:20px;
}
.about:hover .ul1 li{
display:block;
}
.ul1:hover .ul1 {
display:block;
}
@-webkit-keyframes move {
   0%   {transform:translate3d(50px,0,0)}
    
    25% {transform:translate3d(0,0,0)}
  
   50% {transform:translate3d(25px,0,0)}
  
   100% {transform:translate3d(0,0,0)}
}

.ul2{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move1 .2s linear alternate ;
}
.about .ul2 li a{
  color:black;
}
.about .ul1 li:hover a{
  color:white;
}
.about:hover .ul2{
display:block;
margin-top:20px;
}
.about:hover .ul2 li{
display:block;
}
.ul2:hover .ul2 {
display:block;
}
@-webkit-keyframes move1 {
   0%   {transform:  scale(.5);}
    50% {transform:scale(1.2);}
  100% {transform:scale(1);}
}

.ul li:hover{
  background:#689F38;
}
.ul1 li:hover{
  background:#689F38;
}
.ul2 li:hover{
  background:#689F38;
}

14

Pure CSS Dropdown Menubar with animations

By: pixeldev

14

Colorful Border Animation

By: Nethan Pogi

/* Page styling -- Not needed to replicate button visuals. */
html,
body {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: "Roboto Mono", monospace;
}

button {
  margin: 50px;
  font-family: inherit;
}
/* End of Page styling */

/* Simple button styling -- No animation */
.simple {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 50px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

.simple::after {
  content: "";
  background-color: #dcbaff;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
}
/* End of Simple Button */

/* Fill button styling */
.fill {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 50px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

.fill::after {
  content: "";
  background-color: #ffe54c;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.fill:hover::after {
  top: 0px;
  left: 0px;
}
/* End of Fill Button  */

/* Slide button styling */
.slide {
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 30px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

.slide i {
  opacity: 0;
  font-size: 13px;
  transition: 0.2s;
  position: absolute;
  right: 10px;
  top: 21px;
  transition: transform 1;
}

.slide div {
  transition: transform 0.8s;
}

.slide:hover div {
  transform: translateX(-6px);
}

.slide::after {
  content: "";
  background-color: #66f2d5;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
}

.slide:hover i {
  opacity: 1;
  transform: translateX(-6px);
}
/* End of Slide Button  */

13

Pastel Animated Buttons (Pure CSS)

By: pixeldev

<nav id="nav" class="clearfix">
		<ul>
			<li>
				<a href="#">Home</a>
				<ul>
					<li><a href="#">Menu Item 1</a></li>
					<li class="submenu">
						<a href="#">Menu Item 2</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li class="submenu">
								<a href="#">Subitem 2</a>
								<ul>
									<li><a href="#">Subitem 1</a></li>
									<li><a href="#">Subitem 2</a></li>
									<li><a href="#">Subitem 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">Menu Item 3</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
							<li><a href="#">Subitem 3</a></li>
						</ul>				
					</li>
					<li><a href="#">Menu Item 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">About</a>
				<ul>
					<li><a href="#">Menu Item 1</a></li>
					<li><a href="#">Menu Item 2</a></li>
					<li><a href="#">Menu Item 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Products</a>
				<ul>
					<li class="submenu">
              <a href="#">Menu Item 1</a>
              <ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
							<li><a href="#">Subitem 3</a></li>
						</ul>
            </li>
					<li><a href="#">Menu Item 2</a></li>
             <li><a href="#">Menu Item 3</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</nav>

@import url(https://reset5.googlecode.com/hg/reset.min.css);

/* Demo Config */
body {font-family:sans-serif}
ul, li {list-style:none; margin:0; padding:0}

/* Nav */
#nav {background-color:#2980b9}
#nav a {color:#fff; display:block; padding:15px 20px; text-decoration:none}
#nav ul li {position:relative}

/* Top Level */
#nav li {transition:background-color .5s}
#nav li:hover {background-color:#50AEED}
#nav > ul > li {display:block; float:left}

/* Sub-level 1 */
#nav > ul li:hover > ul {opacity:1; top:45px; visibility:visible}
#nav > ul ul {opacity:0; visibility:hidden; position:absolute; top:60px; transition:all .25s}
#nav > ul ul li {background-color:#3498db; width:180px}
#nav > ul ul li a {padding:10px 20px}

/* Level 2 and Beyond */
#nav > ul  ul li > ul {margin-left:180px; top:15px}
#nav > ul  ul li:hover > ul {margin-left:180px; top:0}
#nav li.submenu:after {content:"\25BA"; color:#fff; display:block; float:right; font-size:10px; height:20px; position:absolute; right:10px; top:12px}

/* Clearfix */
.clearfix:after {visibility: hidden; display: block; font-size: 0; content:" "; clear:both; height:0}

All

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

Pure CSS Navigation Overlay

By: pixeldev

Pure CSS – File icons with hover animation

By: pixeldev

Pure CSS Animated Weather Icon Hover

By: pixeldev

Pure CSS Animated Wave

By: pixeldev

Flip Navbar with Pure CSS

By: pixeldev

Pure CSS Dropdown Menubar with animations

By: pixeldev

Colorful Border Animation

By: Nethan Pogi

Pastel Animated Buttons (Pure CSS)

By: pixeldev

Animated Navigation Menu using Pure CSS

By: pixeldev

Fixed Header Responsive Table

By: pixeldev

Expanding Pure CSS Button

By: pixeldev