In this demo we're going to create a creative get in touch contact information icon designs and their hover effects.

Let's dive into the code:

- HTML Structure

HTMLCopy <div class="card">
	<div class="social-icon marker-style">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon marker-style pin">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon marker-style icon-bg">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon perspactive-style">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style round">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style between">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon hexagon-style square-sm">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style square-lg">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style pentagon">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

- CSS Styles

CSSCopy :root {
    --clr-blue: #4285F4;
    --clr-red: #EA4335;
}
.section {
    padding: 50px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin: -1px 0;
}
.card {
    display: inline-block;
    width: 300px;
    cursor: pointer;
}

In this post we'd love to share a CSS Shapes and their transformation on mouse over/hover using pure CSS. 

This demo provides various kind of shape transformations like: - Circle -> Square, Square -> Triangle, Square -> Pentagon, Star -> Square, Arrow -> Square and many more.

Some of the old browsers will not support the demo because the demo uses the clip-path advance css property.

The code structure

-HTML Structure

HTMLCopy <div class="shape-row">
	<div class="col-4">
		<div class="shape circle to-zoom"></div>
	</div>
	<div class="col-4">
		<div class="shape circle to-ellipse"></div>
	</div>
	<div class="col-4">
		<div class="shape circle to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-triangle"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-trapezoid"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-parallelogram"></div>         
	</div>
	<div class="col-4">
		<div class="shape square to-rhombus"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-pentagon"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-hexagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-heptagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-octagon"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-bevel"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape square to-rabbet"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-normal to-right"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-point to-right"></div>
	</div>
	<div class="col-4">
		<div class="shape arrow-chevron to-right"></div>
	</div>
</div>
<div class="shape-row">
	<div class="col-4">
		<div class="shape star to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape close to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape frame to-square"></div>
	</div>
	<div class="col-4">
		<div class="shape square to-send"></div>
	</div>
</div>

- CSS Styles

CSSCopy .container {
    width: 80%;
    margin: 0 auto;
}
.shape-row {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 30px 0;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
}

.shape-row::after {
    display: table;
    content: " ";
    clear: both;
}
.col-4 {
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}
.shape {
    width: 175px;
    height: 175px;
    background: #4285F4;
    margin: 0 auto;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.shape.circle {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
.shape.circle.to-zoom {
    -webkit-clip-path: circle(40.0% at 50% 50%);
    clip-path: circle(40.0% at 50% 50%);
}
.shape.circle.to-zoom:hover {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
/* Circle to ellipse */
.shape.circle.to-ellipse {
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
}
.shape.circle.to-ellipse:hover {
    -webkit-clip-path: ellipse(30% 50% at 50% 50%);
    clip-path: ellipse(30% 50% at 50% 50%);
}
/* Circle to square */
.shape.circle.to-square:hover {
    -webkit-clip-path: circle(70% at 50% 50%);
    clip-path: circle(70% at 50% 50%);
}
/* Square */
.shape.square {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
/* Square to triangle */
.shape.square.to-triangle:hover {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
}
/* Square to trapezoid */
.shape.square.to-trapezoid:hover {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
/* Square to parallelogram */
.shape.square.to-parallelogram:hover {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
/* Square to rhombus */
.shape.square.to-rhombus:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Square to pentagon */
.shape.square.to-pentagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0);
}
.shape.square.to-pentagon:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* Square to hexagon */
.shape.square.to-hexagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 1% 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 1% 0);
}
.shape.square.to-hexagon:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* Square to heptagon */
.shape.square.to-heptagon {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
}
.shape.square.to-heptagon:hover {
    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/* Square to octagon */
.shape.square.to-octagon {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0 0);
    clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0 0);
}
.shape.square.to-octagon:hover {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/* Square to bevel */
.shape.square.to-bevel {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}
.shape.square.to-bevel:hover {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
/* Square to rabbet */
.shape.square.to-rabbet {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);
clip-path: polygon(0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%);
}
.shape.square.to-rabbet:hover {
    -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
/* Arrow */
.shape.arrow-normal {
    -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
.shape.arrow-normal.to-right:hover {
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
/* Arrow point */
.shape.arrow-point {
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}
.shape.arrow-point.to-right:hover {
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
/* Arrow chevron */
.shape.arrow-chevron {
    -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.shape.arrow-chevron.to-right:hover {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* Star to square */
.shape.star {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.shape.star.to-square:hover {
    -webkit-clip-path: polygon(50% 0%, 74% 0, 100% 0, 100% 59%, 100% 100%, 51% 100%, 0 100%, 0 60%, 0 0, 26% 0);
    clip-path: polygon(50% 0%, 74% 0, 100% 0, 100% 59%, 100% 100%, 51% 100%, 0 100%, 0 60%, 0 0, 26% 0);
}
/* Close to square */
.shape.close {
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.shape.close.to-square:hover {
    -webkit-clip-path: polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 100% 100%, 100% 80%, 100% 50%, 100% 0, 80% 0%, 50% 0);
    clip-path: polygon(20% 0%, 0 0, 0 50%, 0 100%, 20% 100%, 50% 100%, 100% 100%, 100% 80%, 100% 50%, 100% 0, 80% 0%, 50% 0);
}
/* Frame to square */
.shape.frame {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}
.shape.frame.to-square:hover {
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);    
}
/* Square to send btn */
.shape.square.to-send {
    -webkit-clip-path: polygon(100% 30%, 0 30%, 0 70%, 100% 70%);
    clip-path: polygon(100% 30%, 0 30%, 0 70%, 100% 70%);
}
.shape.square.to-send:hover {
    -webkit-clip-path: polygon(100% 0, 0 45%, 50% 50%, 65% 100%);
    clip-path: polygon(100% 0, 0 45%, 50% 50%, 65% 100%);
}

Hope you guys liked the demo. Enjoy!

In this post, we're creating a radio button and checkbox elements designs using CSS.

The web browsers are not support all the properties/designs for this kind elements. So, in this demo we manipulating the elements(radio-button, checkbox) and replace the core elements with HTML tag(label) and CSS design.

The demo has 2 types of color themes. You can change the theme by replacing the variable file in index.html

The code snippets:

- HTML Structure

 <div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_1" />
    <label for="radio_border_zoomOut_1">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_2" />
    <label for="radio_border_zoomOut_2">Radio button</label>
</div>	
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_3" />
    <label for="radio_border_zoomOut_3">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_1" />
    <label for="checkbox_border_zoomOut_1">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_2" />
    <label for="checkbox_border_zoomOut_2">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_3" />
    <label for="checkbox_border_zoomOut_3">checkbox</label>
</div>

<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_1" />
    <label for="radio_border_zoomIn_1">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_2" />
    <label for="radio_border_zoomIn_2">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_3" />
    <label for="radio_border_zoomIn_3">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_1" />
    <label for="checkbox_border_zoomIn_1">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_2" />
    <label for="checkbox_border_zoomIn_2">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_3" />
    <label for="checkbox_border_zoomIn_3">checkbox</label>
</div>

<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_1" />
    <label for="radio_solid_1">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_2" />
    <label for="radio_solid_2">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_3" />
    <label for="radio_solid_3">Radio button</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_1" />
    <label for="checkbox_solid_1">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_2" />
    <label for="checkbox_solid_2">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_3" />
    <label for="checkbox_solid_3">Checkbox</label>
</div>

<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__1" />
    <label for="radio_solid_border__1">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__2" />
    <label for="radio_solid_border__2">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__3" />
    <label for="radio_solid_border__3">Radio button</label>
</div>

<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_1" />
    <label for="checkbox_solid_border_1">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_2" />
    <label for="checkbox_solid_border_2">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_3" />
    <label for="checkbox_solid_border_3">Checkbox</label>
</div>

<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__1" />
    <label for="radio_solid_border_bg__1">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__2" />
    <label for="radio_solid_border_bg__2">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__3" />
    <label for="radio_solid_border_bg__3">Radio button</label>
</div>

<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_1" />
    <label for="checkbox_solid_border_bg_1">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_2" />
    <label for="checkbox_solid_border_bg_2">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_3" />
    <label for="checkbox_solid_border_bg_3">Checkbox</label>
</div>

<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-linux"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_1" />
    <label for="radio_card_1">Option 1</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-apple"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_2" />
    <label for="radio_card_2">Option 2</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-windows"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_3" />
    <label for="radio_card_3">Option 3</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-bike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_1" />
    <label for="checkbox_card_1">Checkbox 1</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-motorbike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_2" />
    <label for="checkbox_card_2">Checkbox 2</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-car"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_3" />
    <label for="checkbox_card_3">Checkbox 3</label>
</div>

- CSS Styles

- style.css

 .grid {
    border-top: 1px solid var(--grid-border-clr);
    border-bottom: 1px solid var(--grid-border-clr);
    margin-bottom: -1px;
}
.col-2 {
    width: 50%;
    float: left;
    padding: 25px 0;
}
.box-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}
.box-group input[type="radio"], .box-group input[type="checkbox"] {
    display: none;
}
.box-group label {
    position: relative;
    cursor: pointer;
    font-weight: 700;
    color: var(--clr-gray);
}
.box-group.basic label {
    font-size: 16px;
    padding-left: 25px;
    transform: var(--transition);
}
.box-group.basic label::before, .box-group.basic label::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transition: var(--transition);
}
.box-group.basic label::after {
    border: 1px solid var(--clr-gray);
}
.box-group.basic label::before {
    left: 1px;
    font-family: "Material Design Icons";
    opacity: 0;
}
.box-group.basic input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.basic input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.basic.zoomOut label::before {
    transform: scale(0);
}
.box-group.basic.zoomIn label::before {
    transform: scale(2);
}
.box-group.basic input[type="radio"] + label::after {
    border-radius: 50%;
}
.box-group.basic:hover label {
    color: var(--clr-gray);
}
.box-group.basic:hover label::after {
    box-shadow: 0 0 5px rgba(0, 0, 0, .15) inset;
}
.box-group.basic input[type="radio"]:checked + label, .box-group.basic input[type="checkbox"]:checked + label {
    color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::after, .box-group.basic input[type="checkbox"]:checked + label::after {
    border-color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::before, .box-group.basic input[type="checkbox"]:checked + label::before {
    opacity: 1;
    transform: scale(1);
    color: var(--clr-green);
}
.box-group.solid label {
    padding: 10px 25px;
    border-radius: 2px;
    transition: var(--transition);
}
.box-group.solid.border label {
    border: 1px solid rgba(0, 0, 0, .25);
}
.box-group.solid.border-bg label {
    background: rgba(0, 0, 0, .1);
}
.box-group.solid:hover label {
    background: rgba(0, 0, 0, .05);
}
.box-group.solid input[type="checkbox"]:checked + label, .box-group.solid input[type="radio"]:checked + label {
    color: #ffffff;
    background: var(--clr-green);
    border-color: var(--clr-green);
}
.box-group.solid label::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    font-family: "Material Design Icons";
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transform: scale(0) translateX(-20px);
    opacity: 0;
    transition: var(--transition);
}
.box-group.solid input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.solid input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.solid input[type="checkbox"]:checked + label::before, .box-group.solid input[type="radio"]:checked + label::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}
.box-group.card {
    position: relative;
    padding: 15px 25px;
    min-width: 120px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s;
    z-index: 9;
}
.box-group.card.checked {
    background: rgba(0, 0, 0, .15);
}
.box-group.card::after {
    position: absolute;
    font-family: "Material Design Icons";
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: var(--clr-green);
    transform: scale(0);
    opacity: 0;
    transition: all .5s;
}
.box-group.card.radio::after {
    content: "\F01A";
}
.box-group.card.checkbox::after {
    content: "\F790";
}
.box-group.card.checked::after {
    transform: scale(1);
    opacity: 1;
}
.box-group.card label {
    font-weight: 700;
    font-size: 16px;
    z-index: -1;
}
.box-group.card i {
    font-size: 55px;
    color: var(--clr-gray);
    display: inline-block;
    margin-bottom: 10px;
    transition: all .5s;
}
.box-group.card:hover {
    background: rgba(0, 0, 0, .1);
}
.box-group.card:hover i {
    color: var(--clr-black);
    transform: translateY(5px);
}
.box-group.card.checked i {
    color: var(--clr-black);
    transform: translateY(5px);
}

- black-theme.css

 :root {
    --transition: .25s;
    --clr-blue: #4285F4;
    --clr-gray: #ccc;
    --clr-black: #fff;
    --clr-green: #4baf4b;
    --grid-border-clr: rgba(255, 255, 255, .1);
}
.dd-center-p-content {
    background: #1C1C1C;
}
.dd-title {
    color: #fff;
}

- white-theme.css

 :root {
    --clr-blue: #4285F4;
    --clr-gray: #6c6c6c;
    --clr-black: #3c3c3c;
    --clr-green: #4baf4b;
    --grid-border-clr: #cccccc;
    --transition: .25s;
}

- Javascripts

 $('[data-check-element]').on('click', function() {
	if( $(this).attr('data-check-element') == 'radio' ) {
		$('.box-group.card.radio').removeClass('checked');
		$(this).addClass('checked');
	} else {
		$(this).toggleClass('checked');
	}
});

Hope you guys liked the demo!

In this post we're creating the animated loading spinners with pure CSS.

In this demo we're sharing the dot spinner, moon spinners, rotators, half circle & square spinners.

HTML Structure

HTMLCopy <div class="spinner dot"></div>
<div class="spinner line"><span></span></div>
<div class="spinner line two"><span></span></div>
<div class="spinner line three"><span></span></div>
<div class="spinner moon"></div>
<div class="spinner moon two"></div>
<div class="spinner moon three"></div>
<div class="spinner filled half"></div>
<div class="spinner filled fourth">
	<div></div>
	<div></div>
</div>
<div class="loader solid square rotate"></div>
<div class="loader solid circle rotate"></div>
<div class="loader solid square fade"></div>
<div class="loader solid circle fade"></div>
<div class="loader circle-full blink-half"></div>
<div class="loader circle-full blink"></div>
<div class="loader circle-full zoomIO-half"></div>
<div class="loader circle-full zoomIO"></div>

CSS Styles

CSSCopy.box {
	border-bottom: 1px solid #ccc;
}
.card {
	position: relative;
	width: 175px;
	height: 200px;
	display: inline-block;
} 

.card > div {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.col {
	min-width: 20%;
	float: left;
}
.spinner {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 40px;
}
/* Dot spinner */
.spinner.dot {
	border: 1px solid #e5e5e5;
	border-radius: 50px;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.dot:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background: #4c4c4c;
	z-index: 9;
}
/* Moon style */
.spinner.moon:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border-right: 2px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 9;
}
.spinner.moon.two:after {
	border-left: 2px solid #4c4c4c;
}
.spinner.moon.three:after {
	border-top: 2px solid #4c4c4c;
	border-bottom: 2px solid #4c4c4c;
}
/* Line spinner */
.spinner.line span {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top: 3px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.line.two span {
	border-bottom: 3px solid #4c4c4c;
}
.spinner.line.three span {
	border-left: 3px solid #4c4c4c;
	border-right: 3px solid #4c4c4c;
}
.spinner.filled.half:before,
.spinner.filled.half:after {
	position: absolute;
	content: " ";
	height: 25px;
	width: 50px;
	background: #EA4335;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.half:before {
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	transform-origin: bottom;
}
.spinner.filled.half:after {
	top: 50%;
	background: #FACD47;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	transform-origin: top;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
}
.spinner.filled.fourth div {
	display: inline-block;
	float: left;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.fourth div:first-child:before {
	top: 0;
	left: 0;
	border-top-left-radius: 50px;
	background: #FACD47;
	transform-origin: bottom right;
}
.spinner.filled.fourth div:first-child:after {
	top: 0;
	right: 0;
	border-top-right-radius: 50px;
	background: #EA4335;
	transform-origin: bottom left;
}
.spinner.filled.fourth div:nth-child(2):before {
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 50px;
	background: #34A853;
	transform-origin: top right;
}
.spinner.filled.fourth div:nth-child(2):after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 50px;
	background: #4285F4;
	transform-origin: top left;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.solid {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
}
/* Fade */
.loader.solid.fade {
	-webkit-animation: loader 1.5s infinite linear;
	animation: loader 1.5s infinite linear;
}
@-webkit-keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
@keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
.loader.solid.square {
	border-radius: 2px;
}
.loader.solid.circle {
	border-radius: 50%;
}
.loader.rotate {
	-webkit-animation: rotate 1s linear  infinite;
	-moz-animation: rotate 1s linear  infinite;
	-ms-animation: rotate 1s linear  infinite;
	-o-animation: rotate 1s linear  infinite;
	animation: rotate 1s linear  infinite;
}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.circle-full {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
	border-radius: 100%;
}
/* Circle(dot) Animation */
.loader.circle-full.blink {
	-webkit-animation: loderBlinkAnimation 1s linear infinite;
	-moz-animation: loderBlinkAnimation 1s linear infinite;
	-ms-animation: loderBlinkAnimation 1s linear infinite;
	-o-animation: loderBlinkAnimation 1s linear infinite;
	animation: loderBlinkAnimation 1s linear infinite;
}
@-webkit-keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
@keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
.loader.circle-full.zoomIO {
	-webkit-animation: loderZoomIOAnimation 1s linear infinite;
	-moz-animation: loderZoomIOAnimation 1s linear infinite;
	-ms-animation: loderZoomIOAnimation 1s linear infinite;
	-o-animation: loderZoomIOAnimation 1s linear infinite;
	animation: loderZoomIOAnimation 1s linear infinite;
}
@-webkit-keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
@keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
.loader.circle-full.blink-half {
	-webkit-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-moz-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-ms-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-o-animation: loaderBlinkHalfAnimation 1s linear infinite;
	animation: loaderBlinkHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
@keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
.loader.circle-full.zoomIO-half {
	-webkit-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-moz-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-ms-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-o-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	animation: loaderZoomIOHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}
@keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}

Hope you guys liked the demo.

In this demo we'd love to share bubble loaders animation/effects with pure CSS with you guys.

In this article we provide the bubble blink effect, zoom in, zoom out, bubble collide animation, bubble bars effects. 

In this article we're using custom css animation/transition. You can change the animation according to your need.

*Note:  Advance animation will only work in latest supported browsers.

HTML Structure

HTMLCopy <div class="loader-box">
	<div class="bubble"></div>
	<div class="bubble animate"></div>
	<div class="bubble animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-in"></div>
	<div class="bubble zoom-out"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-out-xl"></div>
</div>
<div class="loader-box">
	<div class="bubble relative animate"></div>
	<div class="bubble relative animate delay-1"></div>
	<div class="bubble relative animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble relative zoom"></div>
	<div class="bubble relative zoom delay-1"></div>
	<div class="bubble relative zoom delay-2"></div>
	<div class="bubble relative zoom delay-3"></div>
</div>
<div class="cf"></div><br />
<div class="loader-box">
	<div class="bubble relative solid collide"></div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-top-bottom">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-left-right">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-zoom">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

CSS Styles

CSSCopy /* Loader box: parent class; */
.loader-box {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 200px;
	height: 200px;
}
/* Bubble */
.bubble {
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	right: 0;
	margin: 0 auto;
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
}
.bubble.relative {
	position: relative;
	left: 50%;
	float: left;
	margin-left: 20px
}
/* Bubble animation */
.bubble.animate {
	-webkit-animation: bubbleEffect 2s ease-out infinite;
	   -moz-animation: bubbleEffect 2s ease-out infinite;
		-ms-animation: bubbleEffect 2s ease-out infinite;
		 -o-animation: bubbleEffect 2s ease-out infinite;
			animation: bubbleEffect 2s ease-out infinite;
}
.bubble.animate.reverse {
	-webkit-animation: bubbleEffectReverse 2s ease-out infinite;
	   -moz-animation: bubbleEffectReverse 2s ease-out infinite;
		-ms-animation: bubbleEffectReverse 2s ease-out infinite;
		 -o-animation: bubbleEffectReverse 2s ease-out infinite;
			animation: bubbleEffectReverse 2s ease-out infinite;
	opacity: 1;
}
.bubble.animate.delay-1 {
	-webkit-animation: bubbleEffect 2s ease-out .5s infinite;
	   -moz-animation: bubbleEffect 2s ease-out .5s infinite;
		-ms-animation: bubbleEffect 2s ease-out .5s infinite;
		 -o-animation: bubbleEffect 2s ease-out .5s infinite;
			animation: bubbleEffect 2s ease-out .5s infinite;
}
.bubble.animate.delay-2 {
	-webkit-animation: bubbleEffect 2s ease-out 1s infinite;
	   -moz-animation: bubbleEffect 2s ease-out 1s infinite;
		-ms-animation: bubbleEffect 2s ease-out 1s infinite;
		 -o-animation: bubbleEffect 2s ease-out 1s infinite;
			animation: bubbleEffect 2s ease-out 1s infinite;
}
@-webkit-keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
@keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
/* Bubble zoom effect */
.bubble.zoom {
	width: 10px;
	height: 10px;
	-webkit-animation: zoomEffect 2s ease-out infinite;
	   -moz-animation: zoomEffect 2s ease-out infinite;
		-ms-animation: zoomEffect 2s ease-out infinite;
		 -o-animation: zoomEffect 2s ease-out infinite;
			animation: zoomEffect 2s ease-out infinite;
}
.bubble.zoom.delay-1 {
	-webkit-animation-delay: .25s;
	-o-animation-delay: .25s;
	animation-delay: .25s;
}
.bubble.zoom.delay-2 {
	-webkit-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}
.bubble.zoom.delay-3 {
	-webkit-animation-delay: .75s;
	-o-animation-delay: .75s;
	animation-delay: .75s;
}
@-webkit-keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
@keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
.bubble.zoom-in {
	-webkit-animation: zoomInEffect 3s ease-out infinite;
	   -moz-animation: zoomInEffect 3s ease-out infinite;
		-ms-animation: zoomInEffect 3s ease-out infinite;
		 -o-animation: zoomInEffect 3s ease-out infinite;
			animation: zoomInEffect 3s ease-out infinite;
	opacity: 1;
}
@-webkit-keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
.bubble.zoom-out {
	-webkit-animation: zoomOutEffect 3s ease-in infinite;
	   -moz-animation: zoomOutEffect 3s ease-in infinite;
		-ms-animation: zoomOutEffect 3s ease-in infinite;
		 -o-animation: zoomOutEffect 3s ease-in infinite;
			animation: zoomOutEffect 3s ease-in infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
@keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
.bubble.zoom-out-xl {
	-webkit-animation: zoomOutXLEffect 1s ease infinite;
	   -moz-animation: zoomOutXLEffect 1s ease infinite;
		-ms-animation: zoomOutXLEffect 1s ease infinite;
		 -o-animation: zoomOutXLEffect 1s ease infinite;
			animation: zoomOutXLEffect 1s ease infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
@keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
/* Bubble collide efffect */
.bubble.solid.collide {
	position: relative;
	width: 25px;
	height: 25px;
	opacity: 1;
	background: #6c6c6c;
	-webkit-animation: bubbleCollideEffect 1s .25s infinite;
	   -moz-animation: bubbleCollideEffect 1s .25s infinite;
		-ms-animation: bubbleCollideEffect 1s .25s infinite;
		 -o-animation: bubbleCollideEffect 1s .25s infinite;
			animation: bubbleCollideEffect 1s .25s infinite;
}
.bubble.solid.collide:before,
.bubble.solid.collide:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
	border-radius: 100%;
	z-index: 9;
	top: 0;
	background: #6c6c6c;
}
.bubble.solid.collide:before {
	left: -25px;
	-webkit-animation: bubbleCollideLeft 1s ease-out infinite;
	   -moz-animation: bubbleCollideLeft 1s ease-out infinite;
		-ms-animation: bubbleCollideLeft 1s ease-out infinite;
		 -o-animation: bubbleCollideLeft 1s ease-out infinite;
			animation: bubbleCollideLeft 1s ease-out infinite;
}
@-webkit-keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
@keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
.bubble.solid.collide:after {
	right: -25px;
	-webkit-animation: bubbleCollideRight 1s .5s ease-out infinite;
	   -moz-animation: bubbleCollideRight 1s .5s ease-out infinite;
		-ms-animation: bubbleCollideRight 1s .5s ease-out infinite;
		 -o-animation: bubbleCollideRight 1s .5s ease-out infinite;
			animation: bubbleCollideRight 1s .5s ease-out infinite;
}
@-webkit-keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;		
	}
}
@keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;		
	}
}
.bubble.solid.bgt {
	opacity: 1;
	background: transparent;
	width: 25px;
	height: 25px;
}
/* Bubble in out from top to bottom */
.bubble.solid.in-out-top-bottom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-top-bottom span:first-child {
	left: -30px;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease infinite;
			animation: bubbleInOutTBEffect 1.5s ease infinite;
}
.bubble.solid.in-out-top-bottom span:nth-child(2) {
	left: 0;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
			animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
}
.bubble.solid.in-out-top-bottom span:last-child {
	right: -30px;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
			animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
}
@-webkit-keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
@keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
/* Bubble in out from left to right */
.bubble.solid.in-out-left-right,
.bubble.solid.in-out-zoom {
	margin-left: 70px;
}
.bubble.solid.in-out-left-right span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-left-right span {
	opacity: 0;
}
.bubble.solid.in-out-left-right span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out infinite;
			animation: bubbleInOutLREffect 2.5s ease-out infinite;
}
.bubble.solid.in-out-left-right span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
}
@-webkit-keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
@keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
/* Bubble in out with scale */
.bubble.solid.in-out-zoom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
	opacity: 0;
}
.bubble.solid.in-out-zoom span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
}
@-webkit-keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}
@keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}

Hello folks, are you guys ready to explore the various kinds of styles/effects on  input text box? Then this demo will show you the basic shadow(inset/outset) effect on input, Spread shadow effect, Glow effect using shadow, Border animations, Shutter(in/out) effects, and border bottom animations.

You can modify the code according to you need.  There are no external libraries/js. The demo is implemented on pure CSS.

HTML Structure

HTMLCopy  <input type="tyext" class="form-input basic" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in smooth-corner" placeholder="DD - Design Drastic">

<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation left"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation right"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation center"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation both-side"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-1" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-2" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-3" placeholder="DD - Design Drastic">
	<span class="border-line-animation top"></span>
	<span class="border-line-animation left"></span>
	<span class="border-line-animation bottom"></span>
	<span class="border-line-animation right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-4" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

CSS Styles

CSSCopy* {
	box-sizing: border-box;
}
.form-group {
	position: relative;
}
.form-input {
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 10px;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
} 
.form-input.smooth-corner {
	border-radius: 5px;
}
.form-input.round {
	border-radius: 50px;
}
.form-input.basic {
	border: 2px solid rgba(0, 0, 0, .15);
}
.form-input.basic:hover {
	border-color: rgba(0, 0, 0, .35);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.form-input.basic:focus {
	border-color: #4285F4;
	box-shadow: 0 0 10px rgba(66, 133, 244, .5);
}
.form-input.basic.shadow-inset:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
}
.form-input.basic.shadow-inset:focus {
	box-shadow: 0 0 10px rgba(66, 133, 244, .5) inset;
}
/* Spread shadow */
.form-input.spread-shadow {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.spread-shadow:focus {
	background: #fff;
	box-shadow: 0 0 40px 5px rgba(0, 0, 0, .2);
}
/* Glow shadow */
.form-input.glow-shadow {
	border: 0;
	background: rgba(0, 0, 0, .1);
}
.form-input.glow-shadow:focus {
	box-shadow: 0 0 0 2px #4285F4;
	background: #fff;
	border-color: #4285F4;
}
/* Chagne Border */
.form-input.border-dashed {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.border-dashed:focus {
	border: 2px dashed #999;
	background: #fff;
	border-color: #4285F4;
}
/* Shutter */
.form-input.shutter {
	border: 2px solid rgba(0, 0, 0, .15);
	box-shadow: 0 20px 0 0 #d5d5d5 inset, 0 -20px 0 0 #d5d5d5 inset;
}
.form-input.shutter:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, .3);
}

.form-input.shutter-in {
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	background: transparent;
}
.form-input.shutter-in:focus {
	border-color: rgba(0, 0, 0, .3);
	box-shadow: 0 -50px 0 #d5d5d5 inset;
}

/* Border bottom effects */
.form-input.border-bottom {
	position: relative;
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-bottom ~ .border-bottom-animation {
	position: absolute;
	content: "";
	width: 0;
	background: rgba(0, 0, 0, .2);
	height: 2px;
	z-index: 99;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
/* Border bottom left */
.form-input.border-bottom ~ .border-bottom-animation.left {
	left: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.left {
	background: #4285F4;
	width: 100%;
}
/* Border bottom right */
.form-input.border-bottom ~ .border-bottom-animation.right {
	right: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.right {
	background: #4285F4;
	width: 100%;
}
/* Border bottom center */
.form-input.border-bottom ~ .border-bottom-animation.center {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.center {
	background: #4285F4;
	width: 100%;
}
/* Border bottom both side */
.form-input.border-bottom ~ .border-bottom-animation.both-side {
	height: 0px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before {
	left: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	right: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:after {
	background: #4285F4;
	width: 50%;
}

/* Border Animations */
/* Style 1 */
.form-input.border-animation {
	border: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after{
	position: absolute;
	content: " ";
	right: 0;
	background: #4285F4;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after
 {
	width: 0;
	height: 2px;
}
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after
 {
	width: 2px;
	height: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
	top: 0;
	right: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
	left: 0;
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
	top: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

/* Set 2 */
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:before {
	left: 50%;
	bottom: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:after {
	top: 0;
	left: 50%;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:before {
	top: 50%;
	left: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:after {
	top: 50%;
	right: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
	left: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:after {
	height: 100%;
	top: 0;
}

/* Set 3 */
.form-input.border-animation.set-3 ~ .border-line-animation.top:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.top:after {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:before {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:after {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:before {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:after {
	width: 100%;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:after {
	height: 100%;
}

/* Set 4 */

.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:before {
	left: 0;
	bottom: 0;
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before {
	transition-delay: 0s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:after {
	right: 0;
	bottom: 0;
	transition-delay: 1s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	transition-delay: .5s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:after {
	right: 0;
	top: 0;
	transition-delay: .5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	transition-delay: 1s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:before {
	left: 0;
	top: 0;
	transition-delay: 0;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before {
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

Hope you guys liked the demo. Comment below for any suggestions or query. Thank you.

Hello folks, are you guys curious to see the background animation/effects inside the text itself? Then this demo is for you. The demo will show you the different animations/effects with background and gradient using the CSS background clip property inside the text.

**The demo is using advanced CSS properties. Only latest browsers which supports the CSS background-clip property will support this demo.

HTML Structure

HTMLCopy<div class="box gradient-bg">
	<h2 class="title">Gradient Background Inside Text</h2>
</div>
<div class="box moving-gradient-block">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-gradient-block fast">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-piece-bg">
	<h2 class="title">Flash Text Animation Effect</h2>
</div>
<div class="box moving-piece-bg torch">
	<h2 class="title">Torch Text Animation Effect</h2>
</div>
<div class="gray-bg">
	<div class="box gradient-img smoke">
		<h2 class="title">Smoke Text Animation Effect</h2>
	</div>
</div>
<div class="box gradient-img">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div>
<div class="box gradient-img animate">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div> 

CSS Styles

CSSCopy.title {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 70px;
	font-weight: 900;
	color: transparent;
}
.gray-bg {
	background: #1c1c1c;
}
.box {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid #ccc;
}

.box.gradient-bg {
	display: inline-block;
	background: -webkit-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: linear-gradient(to right, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.box.moving-gradient-block {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200% auto;
	-webkit-animation: animateBg 7.5s infinite linear;
	animation: animateBg 7.5s infinite linear;
}
.box.moving-gradient-block.fast {
	background-position: 0;
	background-size: 150px;
	animation-timing-function: linear;
}
@keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
@-webkit-keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
.box.moving-gradient-block .title {
	padding: 50px 20px;
	border: 10px solid rgba(255, 255, 255, .5);
	border-radius: 5px;
}

.box.moving-piece-bg {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 150px 100px;
	background-repeat: no-repeat;
	animation: animateBlockEffect 5s linear infinite;
}
.box.moving-piece-bg.torch {
	display: inline-block;
	background: -webkit-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: -o-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: linear-gradient(to right, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px 100px;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}
@keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		background-position: 115%;
	}
}
@-webkit-keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		-webkit-background-position: 115%;
	}
}

.box.gradient-img {
	display: inline-block;
	background: url('../2.jpg');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent; 
}

.box.gradient-img.smoke {
	display: inline-block;
	background: url('../1.png');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px;
	background-position: 0;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}

.box.animate {
	animation: animateBg 5s linear infinite;	
}

@media(max-width: 768px) {
	.title {
		font-size: 30px;
	}
	.box.moving-piece-bg, .box.moving-piece-bg.torch {
		background-size: 50px 100%;
	}
} 

Hello geeks, This demo is used to create a hamburger circular menu effect using CSS and Javascript.

There are two variants of the menu. You can modify the demo and animation according to your need.

- data- attributes: dd-toggle to toggle the menu.

menu--top-left and menu--top-right are the position & animation classes. you can cusomize the code in CSS to change the animation/position.

HTML Structure

HTMLCopy <div class="menu menu--top-left" id="menu_top_left">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_left">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--top-right" id="menu_top_right">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_right">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS Styles

CSSCopy .menu {
	position: fixed;
	width: 0;
	height: 0;
}
.menu.menu--top-left {
	top: 0;
	left: 0;
}
.menu.menu--top-right {
	top: 0;
	right: 0;
}
.menu:after {
	position: absolute;
	content: " ";
	background: #393E46;
	z-index: -1;
	width: 0;
	height: 0;
	-webkit-transition: all .5s cubic-bezier(0, 0, 0, 1);
	   -moz-transition: all .5s cubic-bezier(0, 0, 0, 1);
	    -ms-transition: all .5s cubic-bezier(0, 0, 0, 1);
	     -o-transition: all .5s cubic-bezier(0, 0, 0, 1);
	        transition: all .5s cubic-bezier(0, 0, 0, 1);
}
.menu.menu--top-left:after {
	border-bottom-right-radius: 100%;
	top: 0;
	left: 0;
}
.menu.menu--top-right:after {
	top: 0;
	right: 0;
	border-bottom-left-radius: 100%;
}
.menu.in:after {
	width: 50vh;
	height: 50vh;
}

.menu.in {
	width: 50vh;
	height: 50vh;
}

.menu .menu__hamburger_ico {
	position: relative;
	display: inline-block;
	background: #393E46;
	color: #fff;
	height: 70px;
	width: 70px;
	box-shadow: 0 0 0 20px #393E46;
	-webkit-transition: all .25s ease-in;
	   -moz-transition: all .25s ease-in;
	    -ms-transition: all .25s ease-in;
	     -o-transition: all .25s ease-in;
	        transition: all .25s ease-in;
	cursor: pointer;
	z-index: 99;
}
.menu.menu--top-right .menu__hamburger_ico {
	border-bottom-left-radius: 100%;
	float: right;
}
.menu.menu--top-left .menu__hamburger_ico {
	border-bottom-right-radius: 100%;
	float: left;
}

.menu .menu__hamburger_ico:hover {
	box-shadow: 0 0 0 10px #393E46;
}

.menu .menu__hamburger_ico span {
	position: absolute;
	display: inline-block;
	height: 3px;
	width: 40px;
	border-radius: 10px;
	background: #fff;
	-webkit-transition: all .25s cubic-bezier(0, 0, 1, 1);
	   -moz-transition: all .25s cubic-bezier(0, 0, 1, 1);
	    -ms-transition: all .25s cubic-bezier(0, 0, 1, 1);
	     -o-transition: all .25s cubic-bezier(0, 0, 1, 1);
	        transition: all .25s cubic-bezier(0, 0, 1, 1);
}
.menu.menu--top-left .menu__hamburger_ico span {
	left: 10px;
}
.menu.menu--top-right .menu__hamburger_ico span {
	right: 10px;
}
.menu .menu__hamburger_ico span:first-child {
	top: 20px;
}
.menu .menu__hamburger_ico span:nth-child(2) {
	top: 35px;
}
.menu .menu__hamburger_ico span:last-child {
	top: 50px;
}
.menu.menu--top-left .menu__hamburger_ico span:first-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:first-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico span:last-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:last-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu.menu--top-left .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu .menu__hamburger_ico.in span:nth-child(2) {
	opacity: 0;
}

.menu .menu__nav_list {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	top: 50%;
	-webkit-transform: translateY(-65%);
	   -moz-transform: translateY(-65%);
	    -ms-transform: translateY(-65%);
	     -o-transform: translateY(-65%);
	        transform: translateY(-65%);
}
.menu.menu--top-left .menu__nav_list {
	left: 25%;
	text-align: left;
}
.menu.menu--top-right .menu__nav_list {
	right: 25%;
	text-align: right;
}
.menu .menu__nav_list li a {
	position: relative;
	display: inline-block;
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	color: #fff;
	visibility: hidden;
	opacity: 0;
	text-decoration: none;
}
.menu.menu--top-left .menu__nav_list li a {
	-webkit-transform: translateX(-25px);
	   -moz-transform: translateX(-25px);
	    -ms-transform: translateX(-25px);
	     -o-transform: translateX(-25px);
	        transform: translateX(-25px);
}
.menu.menu--top-right .menu__nav_list li a {
	-webkit-transform: translateX(25px);
	   -moz-transform: translateX(25px);
	    -ms-transform: translateX(25px);
	     -o-transform: translateX(25px);
	        transform: translateX(25px);
}
.menu.in .menu__nav_list li a {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;

}
.menu.in .menu__nav_list li a:before {
	position: absolute;
	content: " ";
	width: 0;
	height: 2px;
	background: #fff;
	border-radius: 5px;
	top: 50%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.menu.in.menu--top-left .menu__nav_list li a:before {
	margin-left: -5px;
	left: -20px;
}
.menu.in.menu--top-right .menu__nav_list li a:before {
	margin-right: -5px;
	right: -20px;
}
.menu.in .menu__nav_list li a:hover:before {
	width: 20px;
}
.menu.in .menu__nav_list li:nth-child(1) a { transition-delay: .15s; }
.menu.in .menu__nav_list li:nth-child(2) a { transition-delay: .30s; }
.menu.in .menu__nav_list li:nth-child(3) a { transition-delay: .45s; }
.menu.in .menu__nav_list li:nth-child(4) a { transition-delay: .60s; }
.menu.in .menu__nav_list li:nth-child(5) a { transition-delay: .75s; }
.menu.in .menu__nav_list li:nth-child(6) a { transition-delay: .90s; }
.menu.in .menu__nav_list li:nth-child(7) a { transition-delay: 1.05s; }
.menu.in .menu__nav_list li:nth-child(8) a { transition-delay: 1.2s; }
.menu.in .menu__nav_list li:nth-child(9) a { transition-delay: 1.35s; }
.menu.in .menu__nav_list li:nth-child(10) a { transition-delay: 1.5s; }

Javascript

JSCopy $('[dd-toggle]').on('click', function() {
	var menu_id = $(this).attr('dd-toggle');
	$('#'+menu_id).toggleClass('in');
	$(this).toggleClass('in');
});

Hello folks, Toady we're going to learn how to create a fancy text animation effects using box and shadow. In this demo we've included the Shutter(from left, right and center) style animation, Fade in/out style animation, Smoke style animation. 

You can modify the demo according to your need.

HTML Structure

HTMLCopy <div class="box shutter-effect center">
	<h2 class="title">Text Shutter Animation: Center Center</h2>
</div>
<div class="box shutter-effect to-left">
	<h2 class="title">Text Shutter Animation: Left -> Right</h2>
</div>
<div class="box shutter-effect to-right">
	<h2 class="title">Text Shutter Animation: Right -> Left</h2>
</div>
<div class="box shadow-clip-effect">
	<h2 class="title">Text Shadow: fade in style</h2>
</div>
<div class="box shadow-effect">
	<h2 class="title">Text shadow: smoke style</h2>
</div>

CSS Styles

CSSCopy .title {
	font-family: "Montserrat Alternates", sans-serif;
	position: relative;
	font-size: 60px;
	font-weight: 900;
	color: #393E46;
}
.box {
	position: relative;
	border: 1px solid #ccc;
	background: #fff;
	margin: -1px 0;
}
.box:after {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all 1.5s linear;
	   -moz-transition: all 1.5s linear;
	    -ms-transition: all 1.5s linear;
	     -o-transition: all 1.5s linear;
	        transition: all 1.5s linear;
	opacity: 1;
	background-position: 0 0;
}
.box.shutter-effect:after {
	background: radial-gradient(#fff 50%, rgba(221,221,221,0), #fff 50%);
	background-size: 100% 100%;
}

.box.shutter-effect.animate:after {
	opacity: .75;
}
.box.shutter-effect.center.animate:after {
	-webkit-transform: scaleX(0);
	   -moz-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	     -o-transform: scaleX(0);
	        transform: scaleX(0);
}
.box.shutter-effect.to-left.animate:after {
	left: 100%;
}

.box.shutter-effect.to-right.animate:after {
	right: 100%;
}

.box.shutter-effect.to-top.animate:after {
	top: 100%;
}
.box.shutter-effect.to-bottom.animate:after {
	bottom: 100%;
}

.box.shadow-effect .title {
	color: #2196f3;
}
.box.shadow-effect {
	position: relative;
	padding: 20px 50px;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background: #2196f3;
}
.box.shadow-effect:after {
	position: absolute;
	content: " ";
	margin: 0 auto;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 50px 0 rgba(255, 255, 255, .1);
	-webkit-transition: all 1.5s ease-out;
	   -moz-transition: all 1.5s ease-out;
	    -ms-transition: all 1.5s ease-out;
	     -o-transition: all 1.5s ease-out;
	        transition: all 1.5s ease-out;
	z-index: -1;
}
.box.shadow-effect.animate:after {
	box-shadow: 0 0 500px 1200px #ededed;
}
.box.shadow-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

.box.shadow-clip-effect {
	background: #ededed;
}
.box.shadow-clip-effect .title {
	color: transparent;
	text-stroke-width: -1px;
	-moz-text-stroke-width: -1px;
  	-webkit-text-stroke-width: -1px;
}
.box.shadow-clip-effect {
	position: relative;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.box.shadow-clip-effect:after {
	-webkit-transition: all 15s ease;
	   -moz-transition: all 15s ease;
	    -ms-transition: all 15s ease;
	     -o-transition: all 15s ease;
	        transition: all 15s ease;
}
.box.shadow-clip-effect.animate:after {
	box-shadow: 0 0 400px 1200px #ededed;
}
.box.shadow-clip-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

@media (max-width: 768px) {
	.title {
		font-size: 30px;
	}
}

Javascript

JSCopy $(document).ready(function(){
	setTimeout(function(){
		animateTexts();
	}, 250);
});
function animateTexts() {
	$('.box').addClass('animate');
}
$('#re_animate').click(function(event) {
	$('.box').removeClass('animate');
	setTimeout(function() { animateTexts() }, 1500);
});

Welcome guys, are you inquisitive to find beautiful loader box(loading characters) effect? Then this article is for you.

In this article we'd love to share a beautiful loader animation effects using CSS and JS with you.

This effect is fully dynamic  & customized. You can manage the loading speed change the animation etc... using the data- attributes.

List of the data- attributes to customize the effect.

• dd-effect="{class-name}" to change the animation effect.
  
• dd-transition-time="{time in ms}" to change the animation/transition time.
  
• dd-remove-done-animated="{true/false}" to remove the animated elements.
  

Follow the code to create the loaders.

HTML Structure

HTMLCopy <div class="loading-characters padding-tb-l" dd-effect="layer" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="fade"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l" dd-effect="up-down"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="rotate-lf" dd-remove-done-animated="false" dd-transition-time="700"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="left-right" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-in" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-out" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>

CSS Styles

CSSCopy .loading-characters.ovn span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters span {
	position: relative;
	display: inline-block;
	padding: 10px;
	background: darkred;
	font-size: 30px;
	width: 30px;
	margin: 0 3px;
	color: #fff;
	border-radius: 3px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.loading-characters.effect-fade span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(.9);
	   -moz-transform: scale(.9);
	    -ms-transform: scale(.9);
	     -o-transform: scale(.9);
	        transform: scale(.9);
}
.loading-characters.effect-fade span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-layer span.active {
	background: #3D84D6;
}
.loading-characters.effect-up-down span {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
	        opacity: 0;
}
.loading-characters.effect-up-down span.active {
	opacity: 1;
/*	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
*/	animation: upDownAnimation 2s ease-in-out;
}

@keyframes upDownAnimation {
	0% {
		-webkit-transform: translateY(-50px);
		   -moz-transform: translateY(-50px);
		    -ms-transform: translateY(-50px);
		     -o-transform: translateY(-50px);
		        transform: translateY(-50px);
	}
	50% {
		-webkit-transform: translateY(-5px);
		   -moz-transform: translateY(-5px);
		    -ms-transform: translateY(-5px);
		     -o-transform: translateY(-5px);
		        transform: translateY(-5px);	
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
}

.loading-characters.effect-left-right span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate(-25px);
	   -moz-transform: translate(-25px);
	    -ms-transform: translate(-25px);
	     -o-transform: translate(-25px);
	        transform: translate(-25px);
}
.loading-characters.effect-left-right span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0);
	   -moz-transform: translate(0);
	    -ms-transform: translate(0);
	     -o-transform: translate(0);
	        transform: translate(0);
}


.loading-characters.effect-rotate-lf span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters.effect-rotate-lf span.active {
	opacity: 1;
	visibility: visible;
	animation: rotateLoadingEffect .75s ease-in-out;
}

@keyframes rotateLoadingEffect {
	0% {
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		     -o-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(390deg);
		   -moz-transform: rotate(390deg);
		    -ms-transform: rotate(390deg);
		     -o-transform: rotate(390deg);
		        transform: rotate(390deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
		    -ms-transform: rotate(360deg);
		     -o-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}


.loading-characters.effect-zoom-in span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.loading-characters.effect-zoom-in span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-zoom-out span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(4);
	   -moz-transform: scale(4);
	    -ms-transform: scale(4);
	     -o-transform: scale(4);
	        transform: scale(4);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.loading-characters.effect-zoom-out span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

Javascript

JSCopy // var total_length = $('.loading-characters span').length;
var transition_time;
$('.loading-characters').each(function() {
	var count = 0;
	var effect = 'effect-'+$(this).attr('dd-effect');
	var total_length = $(this).children('span').length;
	var transition_time = ( $(this).attr('dd-transition-time') == undefined ? 500 : Number($(this).attr('dd-transition-time')));
	$(this).addClass('effect-'+$(this).attr('dd-effect'));
	loadingEffect(count, effect, transition_time, total_length);
});
// loadingEffect(count);
function loadingEffect(count, effect, transition_time, total_length) {
	if( count < total_length ) {
		count++;
		setTimeout(function() {
			$('.loading-characters.'+effect+' span:nth-child('+count+')').addClass('active');
			loadingEffect(count, effect, transition_time, total_length);
		}, transition_time);
		setTimeout(function() {
			if( $('.loading-characters.'+effect).attr('dd-remove-done-animated') != 'false' ) {
				$('.loading-characters.'+effect+' span:nth-child('+(count - 1)+')').removeClass('active');
			}
		}, transition_time);
	} else {
		setTimeout(function() {
			$('.loading-characters.'+effect+' span').removeClass('active');
		}, transition_time);
		count = -1;
		loadingEffect(count, effect, transition_time, total_length);
	}
}

To run this script you must have to include the jQuery library.

Hope you guys like this demo and use it in your own projects.

In this article we'll create a card/box header with beautiful css shapes.

Below is the code to create the card/box title heading.

HTML Markup

HTMLCopy <div class="box">
	<h2 class="ribbon blue bottom">Awesome Title!</h2>
	<h3>Normal Heading</h2>
	<h2 class="ribbon blue top">Another Awesome Title!</h2>
	<h3>Triangle to up</h2>
	<h2 class="ribbon blue crossed">Another Awesome Title!</h2>
	<h3>Triangle to up and down</h2>
	<h2 class="ribbon expand"><span>Awesome title here!</span></h2>
	<h3>Triangle to both side</h2>
	<h2 class="ribbon red-gradient">Awesome Title Here!</h2>
	<h3>Background gradient</h2>
</div>

Apply CSS Styles

CSSCopy .box {
	position: relative;
	margin: 0 auto;
	background: #FFF;
	max-width: 500px;
}
.ribbon {
	background: #2D5699;
	color: #FFF;
	padding: 18px;
	text-align: center;
	margin-left: -20px;
	margin-right: -20px;
	/*border-radius: 3px 3px 0 0;*/
	position: relative;
}
.ribbon:before, .ribbon:after {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	top: 100%;
}
.ribbon.red-gradient {
	background: rgb(234,67,53); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(234,67,53,1) 0%, rgba(178,0,0,1) 100%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(234,67,53,1) 0%,rgba(178,0,0,1) 100%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(234,67,53,1) 0%,rgba(178,0,0,1) 100%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4335', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.ribbon.red-gradient:before {
	border-top: 20px solid #861F1A;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.red-gradient:after {
	border-top: 20px solid #861F1A;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.blue {
	background: #4285F4;
}
.ribbon.blue.top:before{
	top: -20px;
	left: 0;
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
}
.ribbon.blue.top:after{
	top: -20px;
	left: calc(100% - 20px);	
	border-bottom: 20px solid #2D5699;
	border-right: 20px solid transparent;
}
.ribbon.blue.bottom:before{
	border-top: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.blue.bottom:after{
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.blue.crossed:before{
	top: -20px;
	left: 0;
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
}
.ribbon.blue.crossed:after{
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.expand {
	position: relative;
	padding: 0;
	background: #4285F4;
}
.ribbon.expand:after {
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.expand:before{
	border-top: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.expand span {
	position: relative;
	padding: 18px 0;
	display: inline-block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.ribbon.expand span:before, .ribbon.expand span:after {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	top: 100%;
}
.ribbon.expand span:after {	
	top: -20px;
	left: calc(100% - 20px);
	border-bottom: 20px solid #2D5699;
	border-right: 20px solid transparent;
}
.ribbon.expand span:before{
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
	top: -20px;
}

In this article we'd love to share a hover text effect with you.

Follow this simple steps to create hover effect.

HTML Markup

HTMLCopy <h2 class="title top" data-letters="Text hover effect from top!">Text hover effect from top!</h2>
<h2 class="title bottom" data-letters="Text hover effect from bottom!">Text hover effect from bottom!</h2>
<h2 class="title left" data-letters="Text hover effect from left!">Text hover effect from left!</h2>
<h2 class="title right" data-letters="Text hover effect from right!">Text hover effect from right!</h2>

Applying CSS Styles

CSSCopy .title {
  font-size: 5em;
  margin: 0;
  position: relative;
  color: #4C4C4C;
  display: inline-block;
  -webkit-text-stroke-width: 0px;
  text-stroke-width: 0px;
}
.title:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: attr(data-letters);
  overflow: hidden;
  white-space: nowrap;
}
.title.top:before {
  transition: height 1s;
  color: #EA4335;
  height: 0;
  z-index: 999;
}
.title.top:hover:before {
  height: 100%;
}

.title.bottom {
  color: #EA4335;
}
.title.bottom:before {
  transition: height 1s;
  color: #4C4C4C;
  height: 100%;
  z-index: 999;
}
.title.bottom:hover:before {
  height: 0;
}
.title.left:before {
  transition: width 1s;
  color: #EA4335;
  width: 0;
  z-index: 999;
}
.title.left:hover:before {
  width: 100%;
}
.title.right {
  color: #EA4335;
}
.title.right:before {
  transition: width 1s;
  color: #4C4C4C;
  width: 100%;
  z-index: 999;
}
.title.right:hover:before {
  width: 0;
}

In this article we'd love to share a menu layer effects with you guys.

Follow the steps and markup to create the beautiful effect:

HTML Markup:

HTMLCopy<nav class="nav nav--simple">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-down">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-up">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-left-to-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-right-to-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-bottom">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav> 

Apply CSS Styles:

CSSCopy .nav {
	padding: 3em 0;
	border-top: 1px solid #AAA;
	margin: -1px 0;
}
.nav .menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav .menu__list li {
	display: inline;
}
.nav .menu__list li a {
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	font-weight: 700;
	color: #4C4C4C;
	text-decoration: none;
	transition: .35s ease;
}
.nav .menu__list li a:hover {
	color: #FFF;
}
.nav .menu__list li a:after,
.nav .menu__list li a:before {
	position: absolute;
	content: " ";
	background: #4285F4;
	width: 0;
	height: 0;
	z-index: -1;
	transition: .35s ease;
}

/* Simple navbar */
.nav.nav--simple .menu__list li a {
	transition: .35s ease;
}
.nav.nav--simple .menu__list li a:hover {
	background: #4285F4;
	color: #FFF;
}
/* Layer down */
.nav.nav--layer-down .menu__list li a:after {
	top: 0;
	left: 0;
	width: 100%;
}
.nav.nav--layer-down .menu__list li a:hover:after {
	height: 100%;
}

/* Layer up */
.nav.nav--layer-up .menu__list li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
}
.nav.nav--layer-up .menu__list li a:hover:after {
	height: 100%;
}

/* Layer left */
.nav.nav--layer-left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 100%;
}
.nav.nav--layer-left .menu__list li a:hover:after {
	width: 100%;
}

/* Layer right */
.nav.nav--layer-right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 100%;
}
.nav.nav--layer-right .menu__list li a:hover:after {
	width: 100%;
}

/* Layer left in right out */
.nav.nav--layer-left-to-right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 100%;
	transition-property: width;
}
.nav.nav--layer-left-to-right .menu__list li a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}

/* Layer right in left out */
.nav.nav--layer-right-to-left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 100%;
	transition-property: width;
}
.nav.nav--layer-right-to-left .menu__list li a:hover:after {
	width: 100%;
	right: 0;
	left: auto;
}


/* Layer center */
.nav.nav--layer-center .menu__list li a:after {
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	margin: 0 auto;
	width: 100%;
}
.nav.nav--layer-center .menu__list li a:hover:after {
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-left .menu__list li a:after {
	top: 0;
	left: 0;
}
.nav.nav--layer-top-left .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-right .menu__list li a:after {
	top: 0;
	right: 0;
}
.nav.nav--layer-top-right .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-left .menu__list li a:after {
	left: 0;
	bottom: 0;
}
.nav.nav--layer-bottom-left .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-right .menu__list li a:after {
	right: 0;
	bottom: 0;
}
.nav.nav--layer-bottom-right .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-center .menu__list li a:after {
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
}
.nav.nav--layer-top-center .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-center .menu__list li a:after {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.nav.nav--layer-bottom-center .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-bottom .menu__list li a:before {
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
}
.nav.nav--layer-top-bottom .menu__list li a:after {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}
.nav.nav--layer-top-bottom .menu__list li a:hover:before,
.nav.nav--layer-top-bottom .menu__list li a:hover:after {
	height: 100%;
}

In this article we'd love to share a menu hover border effect with you guys.

Follow the steps and markup to create the beautiful effect:

HTML Markup

HTMLCopy<nav class="nav nav--simple">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--shadow top">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--shadow top-inset">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--shadow bottom">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--shadow bottom-inset">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line bottom left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line bottom right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line bottom left-out">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line bottom right-out">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line top left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line top right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line bottom center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--line top center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Apply CSS Styles:

CSSCopy .nav {
	padding: 3em 0;
	border: 1px solid #AAA;
	margin: -1px 0;
}
.nav .menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav .menu__list li {
	display: inline;
	padding: 0 20px;
}
.nav .menu__list li a {
	position: relative;
	display: inline-block;
	padding: 15px 0;
	font-weight: 700;
	color: #4C4C4C;
	text-decoration: none;
	transition: .35s ease;
	border-bottom: 3px solid transparent;
}
.nav .menu__list li a:after {
	position: absolute;
	display: inline-block;
	background: #4285F4;
	content: " ";
	width: 0;
	height: 0;
	transition: .35s ease;
}

.nav .menu__list li a:hover {
	color: #4285F4;
}
.nav.nav--simple .menu__list li a:hover {
	border-bottom: 3px solid #4285F4;
	color: #4285F4;
}

.nav.nav--shadow.top .menu__list li a:hover {
	box-shadow: 0 -4px 0 #4285F4;
}

.nav.nav--shadow.top-inset .menu__list li a:hover {
	box-shadow: 0 4px 0 #4285F4 inset;
}

.nav.nav--shadow.bottom .menu__list li a:hover {
	box-shadow: 0 4px 0 #4285F4;
}

.nav.nav--shadow.bottom-inset .menu__list li a:hover {
	box-shadow: 0 -4px 0 #4285F4 inset;
}
/* Line: left */
.nav.nav--line.bottom.left .menu__list li a:after {
	left: 0;
	bottom: 0;
	height: 3px;
}
.nav.nav--line.bottom.left .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Right */
.nav.nav--line.bottom.right .menu__list li a:after {
	right: 0;
	bottom: 0;
	height: 3px;
}
.nav.nav--line.bottom.right .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Right */
.nav.nav--line.bottom.right-out .menu__list li a:after {
	bottom: 0;
	left: 0;
	height: 3px;
}
.nav.nav--line.bottom.right-out .menu__list li a:hover:after {
	width: 100%;
	right: 0;
	left: auto;
}

/* Line: Bottom Left */
.nav.nav--line.bottom.left-out .menu__list li a:after {
	bottom: 0;
	right: 0;
	height: 3px;
}
.nav.nav--line.bottom.left-out .menu__list li a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}

/* Line: Top Left */
.nav.nav--line.top.left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 3px;
}
.nav.nav--line.top.left .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Top Right */
.nav.nav--line.top.right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 3px;
}
.nav.nav--line.top.right .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Center */
.nav.nav--line.bottom.center .menu__list li a:after {
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 auto;
}
.nav.nav--line.bottom.center .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Top Center */
.nav.nav--line.top.center .menu__list li a:after {
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 auto;
}
.nav.nav--line.top.center .menu__list li a:hover:after {
	width: 100%;
}

In this article we'd love to share a CSS Box Ribbon with you guys.

Follow the steps to generate a ribbon on the box.

HTML Markup

HTMLCopy<!-- Ribbon 1 -->
<div class="box ofh">
  <div class="top-cross-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 2 -->
<div class="box">
  <div class="arrow-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 3 -->
<div class="box">
  <div class="bottom-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 4 -->
<div class="box ofh">
  <div class="half-circle-ribbon">30% <br /> offer</div>
  Lorem ipsum dolor sit amet, adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 5 -->
<div class="box">
  <div class="cross-shadow-ribbon">Offer Text!</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ad, non nostrum tenetur praesentium dolore maxime nihil officiis explicabo culpa ab facilis voluptatibus asperiores labore quos minima distinctio, tempora in.
</div>
<!-- Ribbon 6 -->
<div class="box">
  <div class="cover-ribbon">
     <div class="cover-ribbon-inside">Offers</div>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div> 

Applying CSS Styles

CSSCopy.box {
	border: 1px solid #CCC;
	padding: 40px 25px;
	background: #FFF;
	max-width: 400px;
	position: relative;
	border-radius: 3px;
  margin: 0 auto;
}
.box.ofh {
  overflow: hidden;
}
/* Ribbon 1 */
.top-cross-ribbon {
	background: #EA4335;
	padding: 7px 50px;
	color: #FFF;
	position: absolute;
	top: 0;
	right: -50px;
	transform: rotate(45deg);
	border: 1px dashed #FFF;
	box-shadow: 0 0 0 3px #EA4335;
	margin: 5px;
}

/* Ribbon 2*/
.arrow-ribbon {
  background: #EA4335;
  color: #FFF;
  padding: 7px 50px;
  position: absolute;
  bottom: 10px;
  right: -1px;
}
.arrow-ribbon:before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    left: -12px;
    border-top: 15px solid transparent;
    border-right: 12px solid #EA4335;
    border-bottom: 15px solid transparent;
    width: 0;
}

/* Ribbon 3 */
.bottom-ribbon {
  background: #EA4335;
  color: #FFF;
  padding: 7px 50px;
  position: absolute;
  bottom: 10px;
  right: -1px;
  border-radius: 20px 0 0 20px;
}
.bottom-ribbon:after {
  position: absolute;
  right: -25px;
  top: -18px;
  bottom: 0;
  z-index: 9999;
  content: "";
  border-bottom: 43px solid #EA4335;
  border-left: 38px solid transparent;
  border-right: 20px solid transparent;
  width: 42px;
  z-index: -1;
}

/*Ribbon 4 */
.half-circle-ribbon {
  background: #EA4335;
  color: #FFF;
  height: 60px;
  width: 60px;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  position: absolute;
  top: -1px;
  right: -1px;
  flex-direction: row;
  border-radius: 0 0 0 100%;
  border: 1px dashed #FFF;
  box-shadow: 0 0 0 3px #EA4335;
}

/* Ribbon 5 */
.cross-shadow-ribbon {
  position: absolute;
  background: #EA4335;
  top: -15px;
  padding: 10px;
  margin-left: 15px;
  color: #FFF;
  border-radius: 0 0 2px 2px;
}
.cross-shadow-ribbon:before {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 15px solid #A42F25;
  border-left: 15px solid transparent;
}

/* Ribbon 6 */
.cover-ribbon {
  height: 115px;
  width: 115px;
  position: absolute;
  right: -8px;
  top: -8px;
  overflow: hidden;
}
.cover-ribbon .cover-ribbon-inside {
  background: #EA4335;
  color: #FFF;
  transform: rotate(45deg);
  position: absolute;
  right: -35px;
  top: 15px;
  padding: 10px;
  min-width: 127px;
  text-align: center;
}
.cover-ribbon .cover-ribbon-inside:before {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #992C23;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  top: 35px;
  transform: rotate(-45deg);
}
.cover-ribbon .cover-ribbon-inside:after {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 10px solid #992C23;
  border-bottom: 7px solid transparent;
  position: absolute;
  left: 95%;
  right: 0;
  top: 34px;
  bottom: 0;
  content: "";
  transform: rotate(-45deg);
} 

Medicare Business is a HTML5 Responsive Bootstrap Informative Template.

Features:

• Easy to setup.
• Easy customisation.
• You can use this template for any kind of static informative website.
• Cross browser compatible.
• Free to use anywhere.
• Static informative layout.

Purpose: Static Informative Template.

Technologies: HTML5, CSS, Bootstrap, Animation, jQuery

In this article we'd love to share a 3d button effect(using pure CSS and HTML) with you guys.

To create a 3d button effect follow the below steps:

- First we'll create an HTML markup

HTML Markup

HTMLCopy<div class="dd-center-content">
	<div class="dd-elements">
		<button class="btn btn-shadow">3D Button!</button>
		<button class="btn btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-shadow-layer">3D Button!</button>
		<button class="btn btn-shadow-layer-inverse">3D Button!</button>
	</div>
	<div class="clearfix"></div><br/>
	<div class="dd-elements">
		<button class="btn btn-round btn-shadow">3D Button!</button>
		<button class="btn btn-round btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-round btn-shadow-layer">3D Button!</button>
		<button class="btn btn-round btn-shadow-layer-inverse">3D Button!</button>
	</div>
	<div class="clearfix"></div><br/>
	<div class="dd-elements">
		<button class="btn btn-perspective btn-shadow">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-layer">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-layer-inverse">3D Button!</button>
	</div>
</div> 

- Apply the css

Applying CSS Styles

CSSCopy.btn {
	border: 1px solid transparent;
	background: #4285F4;
	color: #FFF;
	text-transform: uppercase;
	font-weight: bolder;
	display: inline-block;
	padding: 20px 50px;
	transition: .5s;
	outline: none;
	cursor: pointer;
	margin: 20px;
}

.btn-shadow {
	box-shadow: 6px 6px 0 0 #C6C6C6, 5px 5px 0 0 #C6C6C6, 4px 4px 0 0 #C6C6C6, 3px 3px 0 0 #C6C6C6, 2px 2px 0 0 #C6C6C6, 1px 1px 0 0 #C6C6C6;
}
.btn.btn-shadow:hover {
	transform: translateY(5px);
	box-shadow: none;
}
.btn-shadow-inverse {
	box-shadow: none;
}
.btn.btn-shadow-inverse:hover{
	transform: translateY(-5px);
	box-shadow: 6px 6px 0 0 #C6C6C6, 5px 5px 0 0 #C6C6C6, 4px 4px 0 0 #C6C6C6, 3px 3px 0 0 #C6C6C6, 2px 2px 0 0 #C6C6C6, 1px 1px 0 0 #C6C6C6;
}

.btn-shadow-layer {
	box-shadow: 9px 9px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2);
}
.btn.btn-shadow-layer:hover {
	transform: translateY(5px);
	box-shadow: none;
}

.btn.btn-shadow-layer-inverse {
	box-shadow: none;
}
.btn.btn-shadow-layer-inverse:hover {
	box-shadow: 9px 9px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2);
	transform: translateY(-5px);
}

.btn.btn-round {
	width: 150px;
	height: 150px;
	text-align: center;
	padding: 0;
	border-radius: 100%;
}

.btn.btn-perspective {
	padding: 25px 50px;
	transform: perspective(500px) rotateX(25deg);
} 

That's it guys. Have fun!

In this article we'd love to share 3d text and their hover effect with animation.

Create the 3d text effect with simple steps.

HTML Markup

HTMLCopy<h1 class="heading layer-shadow">3d Text Title</h1>
<br />
<h1 class="heading layer-shadow-reverse">3d Text Title</h1>
<br />
<h1 class="heading shadow">3d Text Title</h1>
<br />
<h1 class="heading double-shadow">3d Text Title</h1>	
<br />
<h1 class="heading perspective perspective-x">Your Title!</h1>
<br />
<h1 class="heading perspective perspective-y">Your Title!</h1> 

And

Applying CSS Styles

CSSCopy
.heading {
	font-size: 6em;
	color: #363636;
	text-transform: uppercase;
	display: inline-block;
	transition: .5s;
	margin: .5em;
}
.heading.layer-shadow {
	text-shadow: 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2), 9px 9px 0 rgba(0, 0, 0, .2);
}
.heading.layer-shadow:hover {
	transform: translateY(5px);
}

.heading.layer-shadow-reverse:hover{
	text-shadow: 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2), 9px 9px 0 rgba(0, 0, 0, .2);
	transform: translateY(-5px);
}
.heading:hover{
	text-shadow: none;
}
.heading.shadow {
	text-transform: none;
	text-shadow: 1px 0px 1px #999, 0px 1px 1px #AAA, 
  2px 1px 1px #999, 1px 2px 1px #AAA,
  3px 2px 1px #999, 2px 3px 1px #AAA,
  4px 3px 1px #999, 3px 4px 1px #AAA,
  5px 4px 1px #999, 4px 5px 1px #AAA,
  6px 5px 1px #999, 5px 6px 1px #AAA,
  7px 6px 1px #999;
}
.heading.shadow:hover {
	text-shadow: none;
	transform: translateY(5px);
}

.heading.double-shadow {
	text-transform: none;
	text-shadow: 4px 3px 0 #F5F5F5, 9px 8px 0 rgba(0,0,0,0.2);
}
.heading.double-shadow:hover {
	text-shadow: none;
	transform: translateY(5px);
}

.heading.perspective {
	text-shadow:  2px 3px 0 #ECECEC, 5px 6px 0 #A9A9A9;
	overflow: hidden;
}
.heading.perspective.perspective-x {
	transform: perspective(600px) rotateX(45deg);
}
.heading.perspective.perspective-y {
	transform: perspective(600px) rotateY(-15deg);	
}
.heading.perspective:hover {
	transform: none;
}

 

That's it guys. Have fun!