BOOTSTRAP 3D BUTTONS


Download

Getting started


By default, Twitter's Bootstrap employs a flat website design. There is nothing wrong with this but you may want to add a little something to certain elements of your website. In this code snippet, I'm going to show you how-to add a shadow to your buttons to make them look 3D.

This is what the Twitter Bootstrap 3D buttons will look like in this end

CSS Code



.btn {
   
    border: 0;
    border-bottom: 4px solid #CCCCCC;
    margin:0;
    -webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
       -moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
            box-shadow: 0 5px 5px -6px rgba(0,0,0,.3);
}
.btn .btn-block:active, .btn .btn-lg:active {
    -webkit-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
       -moz-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
            box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3);
}
.btn-default
{
    color: #555;
    background-color: #f9f9f9;
    border-color: #cacaca;
   /* text-shadow: 1px 1px 0 #f5f5f5;*/
}
.btn-default:hover, .btn-default:focus
{
    background-color: #f4f4f4;
    border-color: #bebebe;
}
.btn-success
{
    background-color: #339933;
    border-color: #226622;
   /* text-shadow: 1px 1px 0 #5fdb34;*/
}
.btn-success:hover, .btn-success:focus
{
    background-color: #006600;
    border-color: #003300;
}
.btn-info {
    background-color: #39b3d7;
    border-color: #348fd2;
   /* text-shadow: 1px 1px 0 #238ed5;*/
}
.btn-info:hover, .btn-info:focus {
    background-color: #45abcd;
    border-color: #347abe;
}
.btn-warning
{
    background-color: #FEAF20;
    border-color: #d79a34; /*  text-shadow: 1px 1px 0 #db9e34;*/
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #f5a620;
    border-color: #cd9034;
}
.btn-danger {
    background-color: #d9534f;
    border-color: #b74642;
   /* text-shadow: 1px 1px 0 #ac2925;*/
}
.btn-danger:hover, .btn-danger:focus
{
    background-color: #AD2825;
    border-color: #721B18;
}
.btn-primary
{
    background-color: #006699;
    border-color: #003F5E;
  /*  text-shadow: 1px 1px 0 #232bd5;*/
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #426acd;
    border-color: #4f56aa;
}
.btn-magick {
    color: #fff;
    background-color: #bb39d7;
    border-color: #9a00cd;
  /*  text-shadow: 1px 1px 0 #9823d5;*/
}
.btn-magick:hover, .btn-magick:focus {
    color: #fff;
    background-color: #b13acd;
    border-color: #8600b9;
}
.btn-pressure {
    position: relative;
    margin-bottom: 0;
}
.btn-pressure:focus {
    -moz-outline-style:none;
         outline:medium none;
}
.btn-pressure:active, .btn-pressure.active {
    top: 4px;
    border: 0;
    position: relative;
}
.btn-sensitive:active, .btn-sensitive.active {
    top: 1px;
    margin-top: 4px;
}
                        

ABOUT

aspxtemplates.com is a place to find the best Bootstrap Templates for your desktop, mobile phone or tablet. We make it easy to discover, share and download High Quality Templates Free.