<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <h2>3D Buttons</h2> <div class="well text-center"> <button type="button" class="btn btn-fresh text-uppercase">Fresh button</button> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Oswald); body{ font-family: 'Oswald', sans-serif; } .btn{ margin: 4px; box-shadow: 1px 1px 5px #888888; } .btn-xs{ font-weight: 300; } .btn-fresh { color: #fff; background-color: #51bf87; border-bottom:2px solid #41996c; } .btn-fresh:hover, .btn-sky.active:focus, .btn-fresh:focus, .open>.dropdown-toggle.btn-fresh { color: #fff; background-color: #66c796; border-bottom:2px solid #529f78; outline: none; } .btn-fresh:active, .btn-fresh.active { color: #fff; background-color: #47a877; border-top:2px solid #39865f; outline: none; outline-offset: none; margin-top: 2px; } .btn:focus, .btn:active:focus, .btn.active:focus { outline: none; outline-offset: 0px; }