Hello Readers

Box-shadow is a very interesting property of CSS3. It gives a glowing and blurring effect to the HTML elements. Box-shadow when used differently gives different visually appealing results. Some of them have been shown here. I have given the demo for default shadow, grow shadow, float shadow, glow shadow, radial shadow, outset shadow and inset shadow. A sample code snippet has been given for all. Transition and Transform property perform the main task here. A time duration for which the shadow would be effective is mentioned. The shadows would be seen on hover.

HTML:

<div>
	<h3>Shadow with Glow Transitions</h3>
	<a class="btn btn-hvr hvr-shadow" href="#">Shadow</a>
	<a class="btn btn-hvr hvr-grow-shadow" href="#">Grow Shadow</a>
	<a class="btn btn-hvr hvr-float-shadow" href="#">Float Shadow</a>
	<a class="btn btn-hvr hvr-glow" href="#">Glow</a>
	<a class="btn btn-hvr hvr-shadow-radial" href="#">Shadow Radial</a>
	<a class="btn btn-hvr hvr-box-shadow-outset" href="#">Box Shadow Outset</a>
	<a class="btn btn-hvr hvr-box-shadow-inset" href="#">Box Shadow Inset</a>
</div>

CSS:

.btn-hvr {
    background: #FFEC33;
    border: 0 none;
    color: #666;
    cursor: pointer;
    display: inline-block;
    line-height: 1 !important;
    margin-top: 6px;
    padding: 14px;
    text-decoration: none;
}
/*=== SHADOW ====*/
.hvr-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow;
    vertical-align: middle;
}
.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
/* ==== grow shadow ====*/
.hvr-grow-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow, transform;
    vertical-align: middle;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}
/* float shadow ==== */
.hvr-float-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
    transform: translateY(-5px);
}
.hvr-float-shadow::before {
    background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
    content: "";
    height: 10px;
    left: 5%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transition-duration: 0.3s;
    transition-property: transform, opacity;
    width: 90%;
    z-index: -1;
}
.hvr-float-shadow:hover::before, .hvr-float-shadow:focus::before, .hvr-float-shadow:active::before {
    opacity: 1;
    transform: translateY(5px);
}
/* ==== glow ====*/
.hvr-glow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow;
    vertical-align: middle;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
/* ==== shadow radial ==== */
.hvr-shadow-radial {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-shadow-radial::before, .hvr-shadow-radial::after {
    background-repeat: no-repeat;
    box-sizing: border-box;
    content: "";
    height: 5px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition-duration: 0.3s;
    transition-property: opacity;
    width: 100%;
}
.hvr-shadow-radial::after {
    background: rgba(0, 0, 0, 0) radial-gradient(ellipse at 50% -50% , rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
    top: 100%;
}
.hvr-shadow-radial::before, .hvr-shadow-radial::after {
    background-repeat: no-repeat;
    box-sizing: border-box;
    content: "";
    height: 5px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition-duration: 0.3s;
    transition-property: opacity;
    width: 100%;
}
.hvr-shadow-radial::before {
    background: rgba(0, 0, 0, 0) radial-gradient(ellipse at 50% 150% , rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
    bottom: 100%;
}
hvr-shadow-radial:hover::before, .hvr-shadow-radial:focus::before, .hvr-shadow-radial:active::before, .hvr-shadow-radial:hover::after, .hvr-shadow-radial:focus::after, .hvr-shadow-radial:active::after {
    opacity: 1;
}
/* ==== box shadow outset ====*/
.hvr-box-shadow-outset {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow;
    vertical-align: middle;
}
.hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
/* ==== box shadow inset ====*/
.hvr-box-shadow-inset {
    backface-visibility: hidden;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow;
    vertical-align: middle;
}
.hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0);
}

see the live demo at https://jsfiddle.net/mani_123/ky5yckx6/show/

I have attached the full code packet at the bottom