<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="panel panel-default modal-dialog">
<div class="panel-body">
<button class="btn btn-default btn-pressure btn-sensitive">Button</button>
<button class="btn btn-info btn-pressure btn-sensitive">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-danger">Button</button>
<button class="btn btn-magick">Button</button>
<button class="btn btn-primary">Button</button>
<hr/>
<button class="btn btn-info btn-lg btn-block">Button</button>
<hr/>
<div>
<button class="btn btn-success btn-pressure pull-left">yes</button>
<button class="btn btn-danger btn-pressure pull-left">no</button>
<button class="btn btn-info btn-pressure pull-right">Join</button>
<button class="btn btn-default btn-pressure pull-right">Forgot password</button>
</div>
</div>
</div>
</div>
</div>
.btn {
border-radius: 0;
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: #80d752;
border-color: #61be26;
text-shadow: 1px 1px 0 #5fdb34;
}
.btn-success:hover, .btn-success:focus {
background-color: #75cd53;
border-color: #53aa27;
}
.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: #d73814;
border-color: #be0000;
text-shadow: 1px 1px 0 #ac2925;
}
.btn-danger:hover, .btn-danger:focus {
background-color: #cd3714;
border-color: #aa0000;
}
.btn-primary {
background-color: #4274d7;
border-color: #4d5bbe;
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;
}
