The Power of Pure CSS - No JavaScript Needed

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

27

Animated Navigation Menu using Pure CSS

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

27

Pure Css Button Hover effect

By: pixeldev

body {
    padding:15px;
}
#heart {
    display:block;
    height:70px;
    width:70px;
    position:relative;
}
#heart .fill {
    display: block;
    height: 70px;
    left: -1px;
    overflow: hidden;
    position: absolute;
    top: -4px;
    width: 70px;
    z-index: 3;
    -webkit-transition: height 2s ease-in-out;
    -moz-transition: height 2s ease-in-out;
    -o-transition: height 2s ease-in-out;
    -ms-transition: height 2s ease-in-out;
    transition: height 2s ease-in-out;
}
#heart .fill:before, #heart .fill:after {
    background: #e74c3c;
    border-radius: 85px 60px 0 0;
    content:"";
    height: 59px;
    left: 37px;
    position: absolute;
    top: 6px;
    width: 36px;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 85px 60px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart .fill:after {
    left: 1px;
    -webkit-transform: rotate(45deg);
    border-radius: 45px 60px 0 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
#heart .outline {
    position: relative;
    margin-left: 8px;
}
#heart .outline:before, #heart .outline:after {
    position: absolute;
    content:"";
    left: 28px;
    top: 1px;
    width: 39px;
    height: 62px;
    background: #d53423;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 85px 60px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart .outline:after {
    left: -11px;
    -webkit-transform: rotate(45deg);
    border-radius: 45px 60px 0 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
#heart:hover .fill {
    height:0px;
}

25

Hover Fill my Heart Up

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

25

Pure CSS Animated Wave

By: pixeldev

<h3>Example 1: Two-Table Structure</h3>
<div id="constrainer">
<div class="scrolltable">
   <table class="header"><thead><th>foo</th><th>foo</th><th>foo</th><th>foo</th></thead></table>
   <div class="body">
       <table>
           <tbody>
           <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>4</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
           </tbody>
       </table>
   </div>
</div>
</div>

<h3>Example 2: Single-Table Structure</h3>
<div id="constrainer2">
    <table>
        <thead>
          <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
        </thead>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
    </table>
</div>

* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
.scrolltable {
    overflow-x: scroll;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.scrolltable > .body {
    /*noinspection CssInvalidPropertyValue*/
    width: -webkit-fit-content;
    overflow-y: scroll;
    flex: 1;
    -webkit-flex: 1;
}

/* an outside constraint to react against */
#constrainer {
    width: 400px;
    height: 200px;
}
#constrainer2 {
    width: 400px;
    overflow-x: scroll;
}
#constrainer2 tbody {
    overflow-y: scroll;
    display: block;
    height: 200px;
}
#constrainer2 thead {
    display: table-row;
}

/* only styling below here */
#constrainer, #constrainer2 {
    border: 1px solid lightgrey;
}
table {
    border-collapse: collapse;
}
th, td {
  border: 1px solid #bbb;
  min-width: 150px;
  padding: 8px 16px;
}
th {
    background-color: lightgrey;
    border-width: 1px;
}
td {
    border-width: 1px;
}
tr:first-child td {
    border-top-width: 0;
}
tr:nth-child(even) {
    background-color: #eee;
}

25

Pure CSS Scrolling Tables with Fixed Headers Examples

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

25

Pure CSS Dropdown Menubar with animations

By: pixeldev

25

Navigation list underline with animated pure css

By: pixeldev

<ul class="navigation">
	<li class="nav-item"><a href="#">Home</a></li>
	<li class="nav-item"><a href="#">Portfolio</a></li>
	<li class="nav-item"><a href="#">About</a></li>
	<li class="nav-item"><a href="#">Blog</a></li>
	<li class="nav-item"><a href="#">Contact</a></li>
</ul>

<div class="site-wrap">
	
  <h1>Pure CSS Off-Screen Menu</h1>
  <h3>Finally, an off-screen menu that doesn't require a bunch of Javascript to work. </h3>
  
  <p>This concept relies on the <code>:checked</code> pseudo-selector as well as the general sibling <code>~</code> selector, so it has decent browser support.</p>
  <p><strong>Browsers supported:</strong> IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium! Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
  <p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat, pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
  <p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
  <p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
  
  <p>Demo by Austin Wulf. <a href="http://www.sitepoint.com/pure-css-off-screen-navigation-menu">See article</a>.</p>
</div>

/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,");
  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
	/* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
	padding: 2px;
	background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }

25

Pure CSS Off-Screen Navigation Menu

By: pixeldev

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

article:nth-of-type(1){
  animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
  animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
  animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
  animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
  animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
  animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
  animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

25

Pure CSS Image Slider

By: pixeldev

body
{
  background-color:#f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin:0px;
  font-size:1.4em;
  font-weight:700;
}

p
{
  font-size:12px;
}

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

/* End Non-Essential  */

.property-card
{
  height:18em;
  width:14em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image
{
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}

/* Social Icons */

.property-social-icons
{
  width:1em;
  height:1em;
  background-color:black;
  position:absolute;
  bottom:1em;
  left:1em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description
{
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image
{
  height:18em;
}

.property-card:hover .property-social-icons
{
  background-color:white;
}

.property-card:hover .property-social-icons:hover
{
  background-color:blue;
  cursor:pointer;
}

/* Optional

.property-image-title
{
text-align:center;
position:Relative;
top:30%;
opacity:0;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
}

.property-card:hover .property-image-title
{
opacity:1;
}

*/

25

Pure CSS Card w/ Social Icons

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

25

Pure CSS Animated Weather Icon Hover

By: pixeldev

/* 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  */

24

All

Animated Navigation Menu using Pure CSS

By: pixeldev

Pure Css Button Hover effect

By: pixeldev

Hover Fill my Heart Up

By: pixeldev

Pure CSS Animated Wave

By: pixeldev

Pure CSS Scrolling Tables with Fixed Headers Examples

By: pixeldev

Pure CSS Dropdown Menubar with animations

By: pixeldev

Navigation list underline with animated pure css

By: pixeldev

Pure CSS Off-Screen Navigation Menu

By: pixeldev

Pure CSS Image Slider

By: pixeldev

Pure CSS Card w/ Social Icons

By: pixeldev

Pure CSS Animated Weather Icon Hover

By: pixeldev

Pastel Animated Buttons (Pure CSS)

By: pixeldev