<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"> <section class="color-2"> <p> <button class="btn btn-2 btn-2a">Button</button> <button class="btn btn-2 btn-2b">Button</button> </p> <p> <button class="btn btn-2 btn-2c">Button</button> <button class="btn btn-2 btn-2d">Button</button> </p> <p> <button class="btn btn-2 btn-2e">Button</button> <button class="btn btn-2 btn-2f">Button</button> </p> <p> <button class="btn btn-2 btn-2g">Button</button> <button class="btn btn-2 btn-2h">Button</button> </p> <p> <button class="btn btn-2 btn-2i">Yes</button> <button class="btn btn-2 btn-2j">No</button> </p> </section> </div> </div>

.btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Button 2 */ .btn-2 { background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none; } /* Button 2a */ .btn-2a { border-radius: 0 0 5px 5px; } .btn-2a:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2a:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2b */ .btn-2b { border-radius: 0 0 5px 5px; } .btn-2b:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2b:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2c */ .btn-2c { border-radius: 5px; } .btn-2c:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2c:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2d */ .btn-2d { border-radius: 5px; } .btn-2d:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2d:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2e */ .btn-2e { border-radius: 5px; box-shadow: -6px 0 #ab3c3c; } .btn-2e:hover { box-shadow: -4px 0 #ab3c3c; left: -2px; } .btn-2e:active { box-shadow: 0 0 #ab3c3c; left: -6px; } /* Button 2f */ .btn-2f { border-radius: 5px; box-shadow: 6px 0 #ab3c3c; } .btn-2f:hover { box-shadow: 4px 0 #ab3c3c; left: 2px; } .btn-2f:active { box-shadow: 0 0 #ab3c3c; left: 6px; } /* Button 2g */ .btn-2g { border-radius: 40px; } .btn-2g:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2g:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2h */ .btn-2h { border-radius: 20px; } .btn-2h:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2h:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2i */ .btn-2i { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .btn-2i:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2i:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2j */ .btn-2j { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .btn-2j:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2j:active { box-shadow: 0 0 #ab3c3c; top: 6px; }