Advanced Box Shadow

dabblet.css

/**
 * Advanced Box Shadow
 * 
 */
.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;
  	border:1px solid rgba(0, 0, 0, .2);
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 30px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 30px rgba(0,0,0,0.4);
    box-shadow:0 0 10px rgba(0,0,0,0.2), 0 0 10px rgba(0,0,0,0.4);
    top:50%;
    bottom:0;
    left:20px;
    right:20px;
    -moz-border-radius:100px / 30px;
    border-radius:100px / 30px;
}
.effect6:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

dabblet.html

<div class="box effect6">
<h3>Add to Cart</h3>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}