<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<a href="#" class="btn btn-block btn-default btn-default-shadow">Default</a>
<a href="#" class="btn btn-block btn-default btn-default-shadow disabled">Default</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-block btn-info btn-info-shadow">Info</a>
<a href="#" class="btn btn-block btn-info btn-info-shadow disabled">Info</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-block btn-warning btn-warning-shadow">Warning</a>
<a href="#" class="btn btn-block btn-warning btn-warning-shadow disabled">Warning</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-block btn-success btn-success-shadow">Success</a>
<a href="#" class="btn btn-block btn-success btn-success-shadow disabled">Success</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-block btn-danger btn-danger-shadow">Danger</a>
<a href="#" class="btn btn-block btn-danger btn-danger-shadow disabled">Danger</a>
</div>
</div>
</div>
</div>
.btn-info-shadow, .btn-success-shadow, .btn-danger-shadow, .btn-warning-shadow, .btn-primary-shadow, .btn-default-shadow,
.btn-shadow {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0, rgba(0, 0, 0, 0.2) 2px 2px 0, rgba(0, 0, 0, 0.2) 3px 3px 0;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.btn-info-shadow {
-moz-box-shadow: #17324e 2px 2px 3px;
-webkit-box-shadow: #17324e 2px 2px 3px;
box-shadow: #17324e 2px 2px 3px;
}
.btn-success-shadow {
-moz-box-shadow: #1d4e02 2px 2px 3px;
-webkit-box-shadow: #1d4e02 2px 2px 3px;
box-shadow: #1d4e02 2px 2px 3px;
}
.btn-danger-shadow {
-moz-box-shadow: #4e0b0a 2px 2px 3px;
-webkit-box-shadow: #4e0b0a 2px 2px 3px;
box-shadow: #4e0b0a 2px 2px 3px;
}
.btn-warning-shadow {
-moz-box-shadow: #896e17 2px 2px 3px;
-webkit-box-shadow: #896e17 2px 2px 3px;
box-shadow: #896e17 2px 2px 3px;
}
.btn-primary-shadow {
-moz-box-shadow: #2f5989 2px 2px 3px;
-webkit-box-shadow: #2f5989 2px 2px 3px;
box-shadow: #2f5989 2px 2px 3px;
}
.btn-default-shadow {
text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 0, rgba(0, 0, 0, 0.2) 1px 1px 0, rgba(0, 0, 0, 0.2) 1px 1px 0;
-moz-box-shadow: #9b9998 2px 2px 3px;
-webkit-box-shadow: #9b9998 2px 2px 3px;
box-shadow: #9b9998 2px 2px 3px;
}
/*
sass styles
@import "compass/css3";
@import "compass/utilities";
@import "import/mixins";
%btn-shadow,
.btn-shadow {
@include opacity(0.8);
@include text-shadow(rgba(black, 0.2) 1px 1px 0, rgba(black, 0.2) 2px 2px 0, rgba(black, 0.2) 3px 3px 0);
font-weight: bold;
@include border-radius(2px);
}
.btn-info-shadow {
@extend %btn-shadow;
@include box-shadow(shade(#1f4368, 25) 2px 2px 3px);
}
.btn-success-shadow {
@extend %btn-shadow;
@include box-shadow(shade(#266802, 25) 2px 2px 3px);
}
.btn-danger-shadow {
@extend %btn-shadow;
@include box-shadow(shade(#680f0d, 25) 2px 2px 3px);
}
.btn-warning-shadow {
@extend %btn-shadow;
@include box-shadow(shade(#b6931e, 25) 2px 2px 3px);
}
.btn-primary-shadow {
@extend %btn-shadow;
@include box-shadow(shade(#3f77b6, 25) 2px 2px 3px);
}
.btn-default-shadow {
@extend %btn-shadow;
@include text-shadow(rgba(black, 0.2) 1px 1px 0, rgba(black, 0.2) 1px 1px 0, rgba(black, 0.2) 1px 1px 0);
@include box-shadow(shade(#b6b4b3, 15) 2px 2px 3px);
}
*/
