"Сonvenient buttons"
Bootstrap 3.3.0 Snippet by Fortael

<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; }

Related: See More


Questions / Comments:

These look really good. I'd like to see form inputs styled in the same way and demonstrated in conjunction.

Aaron () - 9 years ago - Reply 0