<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="title"> <h1>Button Styles</h1> </div> <div class="content"> <!--<input type="button" class="btn-1" value="Button 1" />--> <!--<input type="button" class="btn-2" value="Button 2" />--> <!--<input type="button" class="btn-3" value="Button 3" />--> <!--<input type="button" class="btn-4" value="Button 4">--> <!--<input type="button" class="btn-5" value="Button 5">--> <a href="#!" class="btn-1">Button 1</a> <a href="#!" class="btn-2">Button 2</a> <a href="#!" class="btn-3">Button 3</a> <a href="#!" class="btn-4">Button 4</a> <a href="#!" class="btn-5">Button 5</a> </div> </div>

body { background: #337ab7; } h1 { color: #fff; text-align: center; font-size: 45px; text-transform: uppercase; margin-bottom: 40px; } .content { text-align: center; } input[type="button"] { display: block; margin-bottom: 20px; } input[type="button"]:focus { outline: none; } a { display: block; width: 30%; position: relative; margin-bottom: 30px; } .btn-1, .btn-2, .btn-3, .btn-4, .btn-5 { cursor: pointer; color: #fff; padding: 10px 45px; border: 4px solid #fb5252; border-radius: 5px; font-size: 26px; text-transform: uppercase; font-weight: bold; letter-spacing: 5px; } .btn-1 { background: #ce0000; } .btn-1:hover { border-color: #909090; background: #616161; } /* */ .btn-2 { background: yellow; border: none; border-bottom: 7px; border-bottom-style: solid; border-bottom-color: #333; border-radius: 5px 5px 0 0; display: inline-block; color: #333; } .btn-2:hover { bottom: -5px; border-bottom: 0; transition: all 0.5s; }