<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"> <div class="col-lg-3"> <p><a href="#" class="btn btn-outlined btn-primary">Demo Primary Button</a></p> <p><a href="#" class="btn btn-outlined btn-success">Demo Success Button</a></p> <p><a href="#" class="btn btn-outlined btn-info">Demo Info Button</a></p> <p><a href="#" class="btn btn-outlined btn-warning">Demo Warning Button</a></p> <p><a href="#" class="btn btn-outlined btn-danger">Demo Danger Button</a></p> </div> <div class="col-lg-4"> <p><a href="#" class="btn btn-outlined btn-block btn-primary">Demo Block Primary Button</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-success">Demo Block Success Button</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-info">Demo Block Info Button</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-warning">Demo Block Warning Button</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-danger">Demo Block Danger Button</a></p> </div> </div> </div>

body{padding-top:30px;} .btn-outlined { border-radius: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-outlined.btn-primary { background: none; border: 3px solid #428bca; color: #428bca; } .btn-outlined.btn-primary:hover, .btn-outlined.btn-primary:active { color: #FFF; background: #428bca; border-color: #428bca: } .btn-outlined.btn-success { background: none; border: 3px solid #5cb85c; color: #5cb85c; } .btn-outlined.btn-success:hover, .btn-outlined.btn-success:active { color: #FFF; background: #47a447; } .btn-outlined.btn-info { background: none; border: 3px solid #5bc0de; color: #5bc0de; } .btn-outlined.btn-info:hover, .btn-outlined.btn-info:active { color: #FFF; background: #39b3d7; } .btn-outlined.btn-warning { background: none; border: 3px solid #f0ad4e; color: #f0ad4e; } .btn-outlined.btn-warning:hover, .btn-outlined.btn-warning:active { color: #FFF; background: #ed9c28; } .btn-outlined.btn-danger { background: none; border: 3px solid #d9534f; color: #d9534f; } .btn-outlined.btn-danger:hover, .btn-outlined.btn-danger:active { color: #FFF; background: #d2322d; }