CSS Code Only

14

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

span {
  display: block;
  margin-top: 2rem;
  font-size: 0.7rem;
  color: #777;
}

span a {
  font-size: 0.7rem;
  color: #999;
  text-decoration: underline;
}

14

Pure Css Button Hover effect

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

14

Pure css accordion with bounce effect

By: pixeldev

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #404040;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .4px;
  background: #eee;
  padding-top: 30px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
  margin: 20px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #549D3C;
  cursor: pointer;
  -ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

14

Pure CSS Material Design card

By: pixeldev

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

html, body {
  background-color: rgb(23,25,31);
  font-family: "open sans";
  color: rgba(255,255,255,0.5);
  text-align: center;
}

ul {
  list-style: none;
  padding-top: 50px;
}

h1 {
  font-weight: 100;
  color: white;
}

.cont {
  width: 700px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

#button {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button:hover {
  box-shadow: 0 0 12px rgba(70,150,240,0.7) inset;
  border: 1px solid rgba(255,255,255,1);
  color: rgba(255,255,255,1);
}

#button2 {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button2:hover {
  box-shadow: 0 40px 12px rgba(70,150,240,0.25) inset, 0 -40px 12px rgba(70,150,240,0.25) inset;
  border: 1px solid rgba(255,255,255,1);
  color: rgba(255,255,255,1);
}

#button3 {
  cursor: pointer;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  float: left;
  transition: all 0.5s;
}

#button3:hover {
  box-shadow: 0 0 8px 4px rgba(70,150,240,0.25) inset, 0 0 8px 4px rgba(70,150,240,0.25);
  border: 1px solid rgba(70,150,240,1);
  color: rgba(255,255,255,1);
}

14

Button hover inner shadow

By: pixeldev

.ms-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Fixed typo: 'jsutify-content' */
  font-family: sans-serif;

width: 100vw;
  height: 100vh;

background: linear-gradient(
    to right bottom,
    rgb(157, 215, 213),
    rgb(255, 135, 120) /* approximation of lighten(rgb(253, 115, 100), 10%) */
  );
}

.ms-header__title {
  flex: 1 1 100%;
  width: 100%;

text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;

/* CSS3 does not support `mask-mode` and `mask-type` in most browsers */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
  mask-image: linear-gradient(to bottom, transparent, white, white, white, transparent);
}

.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;

animation-name: wordSlider;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: 7s;
}

.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}

@keyframes wordSlider {
  0%, 19% {
    transform: translateY(0%);
  }

25%, 44% {
    transform: translateY(-25%);
  }

50%, 69% {
    transform: translateY(-50%);
  }

75%, 94% {
    transform: translateY(-75%);
  }

100% {
    transform: translateY(-75%);
  }
}

14

CSS-only word slider

By: pixeldev

<div id="nav">
			<ul class="nav-menu clearfix unstyled">
				<li><a href="#" class="three-d active">
					Home
					<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Services
					<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Products
					<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					About
					<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Contact
					<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
				</a></li>
				<li><a href="#" class="three-d">
					Blog
					<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
				</a>
					<ul class="clearfix unstyled drop-menu">
						<li><a href="#" class="three-d">
								Html5
								<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Css3
								<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								JavaScript
								<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
							</a></li>
							<li><a href="#" class="three-d">
								Videogames
								<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
							</a></li>
					</ul>
				</li>
				<li><a href="#" class="three-d">
					Shop On-line
					<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
				</a></li>
			</ul>
		</div>

@import url("https://www.w3cplus.com/demo/css3/base.css");

@font-face {
    font-family: 'sansationregular';
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
    src: url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
         url('https://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	background-color:#edecec;
}
ul, li {
  list-style: none outside none;
}
/* basic menu styles */
.nav-menu {
  display: block;
	background: #74adaa;
	width:951px;
	margin: 50px auto 150px;
}
.nav-menu > li {
  display: inline;
  float:left;			
	border-right:1px solid #94c0be;
  position: relative;
}
.nav-menu > li:last-child {
  border-right: none;
}
.nav-menu li a {
  color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'sansationregular';
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: capitalize;
	overflow: visible;
	line-height: 20px;
	font-size: 20px;
	padding: 15px 30px 15px 31px;			
}

/* animation domination */
.three-d {
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-transition: all .07s linear;
  -moz-transition: all .07s linear;
  -ms-transition: all .07s linear;
  -o-transition: all .07s linear;
  transition: all .07s linear;
  position: relative;
}

.three-d:not(.active):hover {
  cursor: pointer;
}

.three-d:not(.active):hover .three-d-box, 
.three-d:not(.active):focus .three-d-box {
  -wekbit-transform: translateZ(-25px) rotateX(90deg);
  -moz-transform: translateZ(-25px) rotateX(90deg);
  -o-transform: translateZ(-25px) rotateX(90deg);
  -ms-transform: translateZ(-25px) rotateX(90deg);
  transform: translateZ(-25px) rotateX(90deg);
}

.three-d-box {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: translatez(-25px);
  -moz-transform: translatez(-25px);
  -ms-transform: translatez(-25px);
  -o-transform: translatez(-25px);
  transform: translatez(-25px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  position: absolute;
  top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
  -webkit-transform: rotatex(0deg) translatez(25px);
  -moz-transform: rotatex(0deg) translatez(25px);
  -ms-transform: rotatex(0deg) translatez(25px);
  -o-transform: rotatex(0deg) translatez(25px);
  transform: rotatex(0deg) translatez(25px);
}

.back {
  -webkit-transform: rotatex(-90deg) translatez(25px);
  -moz-transform: rotatex(-90deg) translatez(25px);
  -ms-transform: rotatex(-90deg) translatez(25px);
  -o-transform: rotatex(-90deg) translatez(25px);
  transform: rotatex(-90deg) translatez(25px);
  color: #FFE7C4;
}

.front, .back {
  display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #74adaa;
	padding: 15px 30px 15px 31px;	
	color: white;
	-webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
  background-color: #51938f;
  -webkit-background-size: 5px 5px;
  background-size: 5px 5px;
  background-position: 0 0, 30px 30px;
  background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
	background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
  position: absolute;
  left: -40px;
	text-align: left;
	line-height: 40px;
	font-size: 14px;
	width: 200px;
	-webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.nav-menu > li:hover ul {
  display: block;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

14

3D navigation with pure CSS

By: pixeldev

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #333333;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #34A65F;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { background: #34A65F; }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '»';
  position: absolute;
  right: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #34A65F; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { color: #ffffff; }

.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }

.navigation ul ul li:hover > a {
  background: #4eb1ff;
  color: #ffffff;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #34A65F;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

14

Pure CSS Vertical Multi-level Navigation Menu

By: pixeldev

<h1>Pure CSS Scrollable Table with Fixed Header</h1>
<h2>Using CSS to allow scrolling within a single HTML table</h2>

<h2>The Big 4 Version</h2>
<h3>Basic CSS Browser Filtering</h3>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th width="20%">Header 1</th>
		<th width="30%">Header 2</th>
		<th width="50%">Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr>
		<td width="20%">Cell Content 1</td>
		<td width="30%">Cell Content 2</td>
		<td width="48%">Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
</tbody>
</table>
</div>

<div>
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
done.
</div>

body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow: auto;
	width: 900px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 900px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	/* width: 740px */
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */

thead.fixedHeader tr {
	position: relative;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

html>body thead.fixedHeader {
	display: table;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

14

Pure CSS Scrollable Table with Fixed Header

By: pixeldev

body{
            width: 100%;
            height: 100vh;
            background-color: #555;
            display: flex;
            justify-content: center;
            align-items: center;
            }
        .water{
            width:400px;
            height: 400px;
            background-color: skyblue;
            border-radius: 50%;
            position: relative;
            box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
            overflow: hidden;
        }
        .water:before, .water:after{
            content:'';
            position: absolute;
            width:400px;
            height: 400px;
            top:-150px;
            background-color: #fff;
        }
        .water:before{
            border-radius: 45%;
            background:rgba(255,255,255,.7);
            animation:wave 5s linear infinite;
        }
        .water:after{
            border-radius: 35%;
            background:rgba(255,255,255,.3);
            animation:wave 5s linear infinite;
        }
        @keyframes wave{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }

13

Wave-loader Animation Pure css

By: pixeldev

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
    </tr>
  </tbody>
</table>

table { 
	width: 750px; 
	border-collapse: collapse; 
	margin:50px auto;
	}

/* Zebra striping */
tr:nth-of-type(odd) { 
	background: #eee; 
	}

th { 
	background: #3498db; 
	color: white; 
	font-weight: bold; 
	}

td, th { 
	padding: 10px; 
	border: 1px solid #ccc; 
	text-align: left; 
	font-size: 18px;
	}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

table { 
	  	width: 100%; 
	}

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

color: #000;
		font-weight: bold;
	}

}

13

Pure CSS Responsive Table.

By: pixeldev

<div class="undercardbox">
      <div class="card">
        <span>Rald Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>

<div class="card">
        <span>Rald Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>

<div class="card">
        <span>Rald Dev</span>
        <div class="cardimg"><img src="https://1.bp.blogspot.com/-FnailpMILyU/XPdqQcQNdQI/AAAAAAAAA_Y/FOTHmGQxZrMiL_UV8vCrLvxLREhM3vtgACLcBGAs/s1600/imh.jpg" alt="" /></div>
        <p>
          Im am New in web development and I want to learn something crazy.
        </p>
      </div>
    </div>

</div>
</div>

body{
  padding: 0;
  margin: 0;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.box {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding: 15vh 0;
  user-select: none;
}
h1 {
  position: relative;
  text-align: center;
  z-index: 100;
}
.cardbox {
  width: 100%;
  height: 50vh;
  margin: 10vh 0 0 0;
  min-height: 300px;
  padding: 25px 0;
  overflow: hidden;
}
.card {
  height: 100%;
  min-width: 240px;
  background: #fff;
  padding: 20px 30px;
  margin: 0 20px;
  border-radius: 5px;
}
span {
  display: block;
  text-align: center;
  font-weight: 700;
}
.cardimg {
  position: relative;
  width: 14vh;
  height: 14vh;
  margin: 10px auto;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  background: #4285f4;
}
.cardimg img {
  width: 110%;
  height: auto;
}
p {
  position: relative;
  text-align: center;
  font-size: 14px;
}
.cardbox::before,
.cardbox::after {
  content: '';
  width: 10%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  filter: blur(40px);
}
.cardbox::before {
  left: 0;
  background: rgba(245, 245, 245, 0.9);
}
.cardbox::after {
  right: 0;
  background: rgba(245, 245, 245, 0.9);
}
.undercardbox {
  animation: move 60s linear 2s infinite alternate;
  display: flex;
  flex-direction: row;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-2800px + 100%));
  }
}

13

All

html lists like tables

By: pixeldev

Pure Css Button Hover effect

By: pixeldev

Pure css accordion with bounce effect

By: pixeldev

Pure CSS Material Design card

By: pixeldev

Button hover inner shadow

By: pixeldev

CSS-only word slider

By: pixeldev

3D navigation with pure CSS

By: pixeldev

Pure CSS Vertical Multi-level Navigation Menu

By: pixeldev

Pure CSS Scrollable Table with Fixed Header

By: pixeldev

Wave-loader Animation Pure css

By: pixeldev

Pure CSS Responsive Table.

By: pixeldev

Responsive Carousel – Pure CSS

By: pixeldev