The Power of Pure CSS - No JavaScript Needed

66

Pure CSS Table Highlight (vertical & horizontal)

body {
  height: 100vh;
  overflow-x: hidden;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#333),
    to(#000)
  );
  background: linear-gradient(to bottom, #333, #000);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.square {
  height: 150px;
  width: 150px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(0deg);
  transform: translateX(-50%) rotateX(35deg) rotateY(0deg);
  bottom: 100px;
  left: 50%;
  -webkit-animation: rotate 4s infinite linear;
  animation: rotate 4s infinite linear;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
    transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
    transform: translateX(-50%) rotateX(35deg) rotateY(360deg);
  }
}
.side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.2);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.side-1,
.side-2 {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background: rgba(0, 0, 255, 0.4);
}
.side-3,
.side-4 {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  background: rgba(0, 0, 255, 0.6);
}
.side-1 {
  left: 50%;
}
.side-2 {
  left: -50%;
}
.side-3 {
  top: 50%;
}
.side-4 {
  top: -50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.side-5 {
  -webkit-transform: translateZ(-75px);
  transform: translateZ(-75px);
}
.side-6 {
  -webkit-transform: translateZ(75px);
  transform: translateZ(75px);
}
.ball {
  position: absolute;
  height: 50px;
  width: 50px;
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#111),
    color-stop(#555),
    to(#ccc)
  );
  background: linear-gradient(to right top, #111, #555, #ccc);
  left: 50%;
  bottom: 180px;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  border-radius: 50%;
  -webkit-animation: bounce 1.4s infinite linear;
  animation: bounce 1.4s infinite linear;
}
@-webkit-keyframes bounce {
  50% {
    -webkit-transform: translate(-50%, -300%);
    transform: translate(-50%, -300%);
  }
  100% {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}
@keyframes bounce {
  50% {
    -webkit-transform: translate(-50%, -300%);
    transform: translate(-50%, -300%);
  }
  100% {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}
.shadow {
  height: 80px;
  width: 80px;
  background: radial-gradient(transparent, #000);
  -webkit-box-shadow: 10px 10px 20px #000, -10px -10px 20px #000;
  box-shadow: 10px 10px 20px #000, -10px -10px 20px #000;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  border-radius: 50%;
  -webkit-animation: show 1.4s infinite linear;
  animation: show 1.4s infinite linear;
  opacity: 1;
}
@-webkit-keyframes show {
  50% {
    -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    height: 40px;
    width: 40px;
  }
}
@keyframes show {
  50% {
    -webkit-box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    box-shadow: 2px 2px 6px #000, -2px -2px 6px #000;
    height: 40px;
    width: 40px;
  }
}

66

3d box-ball animation

By: pixeldev

66

Colorful Border Animation

By: pixeldev

.container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    background: #ffffff;
}

h2.title {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 30px;
    color: #222222;
}

h2.title::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 3px;
    left: calc(50% - 25px);
    bottom: 0;
    background: #222222;
}

p {
    position: relative;
    margin: 15px auto;
    font-size: 16px;
    color: #222222;
}

.btn {
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 12px 27px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #999999;
    background: #ffffff;
    border: 3px solid #999999;
    cursor: pointer;
    transition: ease-out 0.5s;
    -webkit-transition: ease-out 0.5s;
    -moz-transition: ease-out 0.5s;
}

.btn.btn-border-1::after,
.btn.btn-border-1::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 0%;
    visibility: hidden;
}

.btn.btn-border-1::after {
    bottom: -3px;
    right: -3px;
    border-left: 3px solid #222222;
    border-bottom: 3px solid #222222;
    transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-1::before {
    top: -3px;
    left: -3px;
    border-top: 3px solid #222222;
    border-right: 3px solid #222222;
    transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-1:hover {
    animation: pulse 1s ease-out .4s;
    color: #222222;
}

.btn.btn-border-1:hover::after,
.btn.btn-border-1:hover::before {
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    visibility: visible;
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::after {
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::before {
    transition: width .1s ease, height .1s ease .1s;
}

.btn.btn-border-2::after,
.btn.btn-border-2::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-2::after {
    top: -3px;
    left: -3px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-2::before {
    bottom: -3px;
    right: -3px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-2:hover {
    color: #222222;
}

.btn.btn-border-2:hover::after,
.btn.btn-border-2:hover::before {
    width: calc(50% + 3px);
    height: calc(50% + 3px);
    border-color: #222222;
}

.btn.btn-border-3::after,
.btn.btn-border-3::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-3::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-3::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-3:hover {
    color: #222222;
}

.btn.btn-border-3:hover::after,
.btn.btn-border-3:hover::before {
    width: 30px;
    height: 30px;
    border-color: #222222;
}

.btn.btn-border-4::after,
.btn.btn-border-4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-4::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-4::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-4:hover {
    color: #222222;
}

.btn.btn-border-4:hover::after,
.btn.btn-border-4:hover::before {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    border-color: #222222;
}

.btn.btn-border-5::after,
.btn.btn-border-5::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-5::after {
    top: 0;
    left: 0;
    border-top: 3px solid transparent;
}

.btn.btn-border-5::before {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid transparent;
}

.btn.btn-border-5:hover {
    color: #222222;
}

.btn.btn-border-5:hover::after,
.btn.btn-border-5:hover::before {
    width: 100%;
    height: 100%;
    border-color: #222222;
}

66

CSS Buttons Hover Effects

By: pixeldev

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

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #1c1f2f;
}

.container{
	position: relative;
	-webkit-box-reflect: below 1px linear-gradient(transparent,#0001);
}

.container .loader{
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 20px solid transparent;
	border-bottom: 20px solid #06c8f0;
	border-right: 20px solid #06c8f0;
	transform: rotate(45deg);
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(90deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: animateBell 4s ease-in-out infinite;
}

@keyframes animateBell{
	0%{
		transform: rotate(0deg);
	}

50%{
		transform: rotate(180deg);
	}

100%{
		transform: rotate(0deg);
	}
}

.container .loader .ball:before{
	content: '';
	position: absolute;
	bottom: 50%;
	right: 15px;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	transform: translateY(-50%);
}

66

Perpetual Animation

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

66

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

66

Pure css accordion with bounce effect

By: pixeldev

66

Line Animation

By: pixeldev

*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
::selection{
	background-color:#2d98da;
	color:#fff;
}
body{
	background-color:#227093;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
}
.Box{
	position:relative;
	width:150px;
	height:150px;
	border:3px solid rgba(255,255,255,.2);
	border-radius:50%;
	text-align:center;
	line-height:150px;
	color:#57beec;
	font-size:20px;
	box-shadow:0px 0px 10px rgba(0,0,0,.2);
	font-weight:bold;
}
.Box:before{
	content:'';
	position:absolute;
	top:-3px;
	left:-3px;
	width:100%;
	height:100%;
	background-color:transparent;
	border:3px solid transparent;
	border-top:3px solid #57beec;
	border-right:3px solid #57beec;
	border-radius:50%;
	transform:rotate(0deg);
	animation:SpanLoading 2s linear infinite;
}
.Box span{
	position:absolute;
	top: 50%;
	left:50%;
	width:50%;
	height:3px;
	background-color:transparent;
	transform-style:preserve-3d;
	transform-origin:left;
	transform:rotate(42deg);
	animation:Loading 2s linear infinite;
}
.Box span:before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:#57beec;
	right:-7px;
	bottom:-7px;
	box-shadow:0px 0px 10px #57beec;
}

@keyframes Loading{
	0%{
	transform:rotate(42deg);
	}
	100%{
	transform:rotate(402deg);
	}
}

@keyframes SpanLoading{
	0%{
	transform:rotate(0deg);
	}
	100%{
	transform:rotate(360deg);
	}
}

66

Glowing Loader Ring Animation

By: pixeldev

<h1>HTML Version of <a href="https://psd.tutsplus.com/tutorials/interface-tutorials/clean-and-modern-pricing-table/#disqus_thread">Design a Clean and Modern Pricing Table in Photoshop</a></h1>

<div class="priceTable">
	<div class="table large">
		<h1>Business Hosting</h1>
		<h2><sup>$</sup>24.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>
		
		<ul>
		<li>500GB Space</li>
		<li>50GB Bandwidth</li>
		<li>100 Subdomains</li>
		<li>25 Emails</li>
		<li>100 MySQL</li>
		<li>100$ Google Account</li>
		<li>24 Hour Support</li>
		<li class="noborder">Free Facebook Access</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>
	</div>
	
	<div class="table left">
		<h1>Shared Hosting</h1>
		<h2><sup>$</sup>14.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>

<ul>
		<li>200GB Space</li>
		<li>20GB Bandwidth</li>
		<li>50 Subdomains</li>
		<li>10 Emails</li>
		<li>50 MySQL</li>
		<li class="noborder">50$ Google Account</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>
	</div>

<div class="table right">
		<h1>Total Hosting</h1>
		<h2><sup>$</sup>34.99</h2>
		<h3>per month (billed annually)</h3>
		<div class="circle"></div>

<ul>
		<li>1000GB Space</li>
		<li>100GB Bandwidth</li>
		<li>150 Subdomains</li>
		<li>50 Emails</li>
		<li>150 MySQL</li>
		<li class="noborder">150$ Google Account</li>
		<li class="action"><a href="#null">Sign Up</a></li>
		</ul>
	</div>		
</div>

body { background: #ddd; font: 12px Helvetica, Arial, sans-serif; color: #000; }
	.noborder { border: none !important; }

body > h1 { text-align: center; padding: 25px 0 10px 0; margin: 0; }
	body > h4 { text-align: center; padding: 0 0 25px 0; margin: 0; }

/* Basic Table Layout
	\* *********************************************************** */
	
	.priceTable { width: 960px; margin: 0 auto; }
	.priceTable .table { 
		width: 320px; 
		margin: 58px 0;
		-webkit-border-radius: 8px;
				border-radius: 8px;
		background: #fff;
		-webkit-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
				box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
	}

.priceTable .table h1 {
		background: #9ddfc4;
		font-size: 21px;
		font-weight: bold;
		text-align: center;
		padding: 18px 0; 
		margin: 0;
		border: 1px solid #97ceb7;
	
		text-shadow: 1px 2px 4px rgba(255,255,255,0.5);
		filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2);
		
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100);
			    box-shadow: inset 1px 1px 3px 1px rgba(186,240,217, 100);
	}

.priceTable .table h2, .priceTable .table h3 {
		margin: 0;
		text-align: center;
		text-shadow: 1px 2px 4px rgba(255,255,255,0.9);
		filter: dropshadow(color=rgba(255,255,255,0.9), offx=1, offy=2);
		background: #e2faed;
		border: 1px solid #97ceb7;
		border-top: none;
	}
	
	.priceTable .table h2 {	padding: 10px 0 0 0; font-size: 52px; border-bottom: none; }
	.priceTable .table h3 {
		color: #6b6b6b;
		padding: 2px 0 12px 0;
		font-size: 12px;
		font-weight: normal;
	}
	
	.priceTable .table sup { font-weight: normal; font-size: 21px }
	
	.priceTable .circle { 
		margin: -8px 140px;
		height: 20px;
    	width: 40px;
		position: absolute;

-webkit-border-radius: 0 0 40px 40px;
		     	border-radius: 0 0 40px 40px;

background: #e2faed;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#e2faed), color-stop(100%,#b7c9bd));
		background: -webkit-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		   background: -moz-linear-gradient(top, #e2faed 52%, #b7c9bd 100%);
		    background: -ms-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		     background: -o-linear-gradient(top, #e2faed 52%,#b7c9bd 100%);
		     	background: linear-gradient(to bottom, #e2faed 52%,#b7c9bd 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2faed', endColorstr='#b7c9bd',GradientType=0 );
     	border-bottom: 1px solid #97ceb7; 
	}
	
	.priceTable ul {
		list-style: none;
		margin: 0;
		padding: 0;
		background: #ffffff;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
		background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	       background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
			background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
			 background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
			    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
		
		text-align: center;
		font-size: 15px;
		color: #44494c;
		border: 1px solid #97ceb7;
		border-top: none;
	}
	
	.priceTable ul li {
		padding: 12px; 
		margin: 0 20px;
		border-bottom: 1px dotted #ccc; 
	}
	
	.priceTable ul li:first-child { padding-top: 23px; }
	.priceTable ul li.action { border: none; padding-bottom: 20px; }
	
	.priceTable .action a {
		display: inline-block;
		width: 80%;
		padding: 10px;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		text-align: center;
		
		background: #bccddd;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bccddd), color-stop(100%,#7f8f9e));
		background: -webkit-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
		   background: -moz-linear-gradient(top, #bccddd 0%, #7f8f9e 100%);
			 background: -ms-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
			  background: -o-linear-gradient(top, #bccddd 0%,#7f8f9e 100%);
				 background: linear-gradient(to bottom, #bccddd 0%,#7f8f9e 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bccddd', endColorstr='#7f8f9e',GradientType=0 );

-webkit-border-radius: 8px;
				border-radius: 8px;	
		-webkit-box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1);
				box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.1);
		text-shadow: 1px 2px 4px rgba(255,255,255,0.5);
		filter: dropshadow(color=rgba(255,255,255,0.5), offx=1, offy=2);
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2);
			    box-shadow: inset 1px 1px 3px 1px rgba(255,255,255,0.2);

color: #000;
		border: 1px solid #7f8899;	
	}
	
	/* 'Large' Table Modifiers
	\* *********************************************************** */
	.priceTable .table.large { 
		position: absolute;
		width: 340px; 
		margin: 0 310px; 
		border-color: #d77b66; 
	}

.priceTable .table.large h1 {
		-webkit-border-radius: 8px 8px 0px 0px;
		 		border-radius: 8px 8px 0px 0px;
		color: #fff;
		text-shadow: 1px 2px 4px rgba(215,123,102,0.9);
		filter: dropshadow(color=rgba(215,123,102,0.9), offx=1, offy=2);
		background: #fca78a;
		-webkit-box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100);
			    box-shadow: inset 1px 1px 3px 1px rgba(253,200,166,100);

border-color: #b7b761;
		border-bottom: 1px solid #d77b66;
	}
	
	.priceTable .table.large h2 { padding-top: 20px; }
	.priceTable .table.large h3 { padding-bottom: 20px; }
	.priceTable .table.large h2, .priceTable .table.large h3 { background: #f2f5c0; border-color: #b7b761; } 
	.priceTable .table.large ul { 
		background: #f6e5b1;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e5b1), color-stop(100%,#e8d7a3));
		background: -webkit-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
	       background: -moz-linear-gradient(top, #f6e5b1 0%, #e8d7a3 100%);
			background: -ms-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
			 background: -o-linear-gradient(top, #f6e5b1 0%,#e8d7a3 100%);
			    background: linear-gradient(to bottom, #f6e5b1 0%,#e8d7a3 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e5b1', endColorstr='#e8d7a3',GradientType=0 );
		border-color: #b8b669; 
		-webkit-border-radius: 0 0 8px 8px; 
				border-radius: 0 0 8px 8px; 
	} 	
	
	.priceTable .table.large li { border-color: #b7b761; }
	
	.priceTable .table.large .action a {
		background: #eba281;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eba281), color-stop(100%,#aa6343));
		background: -webkit-linear-gradient(top, #eba281 0%,#aa6343 100%);
		   background: -moz-linear-gradient(top, #eba281 0%, #aa6343 100%);
			 background: -ms-linear-gradient(top, #eba281 0%,#aa6343 100%);
			  background: -o-linear-gradient(top, #eba281 0%,#aa6343 100%);
				 background: linear-gradient(to bottom, #eba281 0%,#aa6343 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba281', endColorstr='#aa6343',GradientType=0 );
		border-color: #d5714d;
		color: #fff;
		text-shadow: 1px 2px 4px rgba(0,0,0,0.2);
		filter: dropshadow(color=rgba(0,0,0,0.52), offx=1, offy=2);
	}

.priceTable .large .circle { 
		margin-left: 150px;
		background: #f2f5c0;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#f2f5c0), color-stop(100%,#c5c7a2));
		background: -webkit-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		   background: -moz-linear-gradient(top, #f2f5c0 52%, #c5c7a2 100%);
		    background: -ms-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		     background: -o-linear-gradient(top, #f2f5c0 52%,#c5c7a2 100%);
		        background: linear-gradient(to bottom, #f2f5c0 52%,#c5c7a2 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5c0', endColorstr='#c5c7a2',GradientType=0 );
		border-bottom-color: #b7b761; 
	}

/* 'Left' and 'Right Table Modifiers
	\* *********************************************************** */
	.priceTable .table.left { float: left; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px; }
	.priceTable .table.left h2, .priceTable .table.left h3 { border-right: none; } 
	.priceTable .table.left h1 {
		-webkit-border-radius: 8px 0px 0px 0px;
		 		border-radius: 8px 0px 0px 0px;
		 border-right: none; 
	}

.priceTable .table.left ul { border-color: #b8b669; -webkit-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; }

.priceTable .table.right { float: right; -webkit-border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px; }
	.priceTable .table.right h2, .priceTable .table.right h3 { border-left: none; } 
	.priceTable .table.right h1 {
		-webkit-border-radius: 0px 8px 0px 0px;
			    border-radius: 0px 8px 0px 0px;
		border-left: none; 
	}
	.priceTable .table.right ul { border-color: #b8b669; -webkit-border-radius: 0 0 8px 0; border-radius: 0 0 8px 0; }

65

HTML Version of ‘Design a Clean and Modern Pricing Table in Photoshop’

By: pixeldev

<ul id="accordion">
		<li>
			<h2>Title One</h2>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
			</div>
		</li>
		<li>
			<h2>Title Two</h2>
			<div class="content">
				Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
			</div>
		</li>
		<li>
			<h2>Title Three</h2>
			<div class="content">
				Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
			</div>
		</li>
		<li>
			<h2>Title Four</h2>
			<div class="content">
				Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</li>
	</ul>

</div>

65

All

Border Style

By: pixeldev

Pure CSS Table Highlight (vertical & horizontal)

By: pixeldev

3d box-ball animation

By: pixeldev

Colorful Border Animation

By: pixeldev

CSS Buttons Hover Effects

By: pixeldev

Perpetual Animation

By: pixeldev

Pure Css Button Hover effect

By: pixeldev

Pure css accordion with bounce effect

By: pixeldev

Line Animation

By: pixeldev

Glowing Loader Ring Animation

By: pixeldev

HTML Version of ‘Design a Clean and Modern Pricing Table in Photoshop’

By: pixeldev

Pure CSS Accordion hover

By: pixeldev