<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"> <button class="button button-neutral" type="button">Button</button> <a class="button button-neutral">Link Button</a> <button class="button button-primary">Connect</button> </div> </div>

.button { background-color: transparent; text-align: center; display: inline-block; text-decoration: none; border: 1px solid; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; padding: 10px 30px 8px; font-size: 16px; font-family: "proxima-nova", sans-serif; font-weight: 300; letter-spacing: 0.2rem; line-height: 1; text-transform: uppercase; } .button:hover{ text-decoration: none; cursor: pointer; color: #000; } .button-neutral{ color: #000; border-color: #000; } .button-neutral:hover{ color: #fff; background-color: #000; } .button-primary{ color: #23849b; border-color: #23849b; } .button-primary:hover{ color: #fff; background-color: #23849b; }