<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"> <br> <a class="btn btn-outline">Primary Button</a> <a class="btn btn-outline">Success Button</a> <a class="btn btn-outline">Warning Button</a> <a class="btn btn-outline">Danger Button</a> <a class="btn btn-outline">Default Button</a> </div> </div>

.btn-outline { background-color: transparent; color: inherit; transition: all .5s; } .btn.btn-outline { color: #3676B6; border-color: #3676B6; } .btn.btn-outline:hover, { color: orange; }