<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">Port 1</a></p> <p><a href="#" class="btn btn-outlined btn-success">Port 2</a></p> <p><a href="#" class="btn btn-outlined btn-info">Port 3</a></p> <p><a href="#" class="btn btn-outlined btn-warning">Port 4</a></p> <p><a href="#" class="btn btn-outlined btn-danger">Port 5</a></p> </div> <div class="col-lg-4"> <p><a href="#" class="btn btn-outlined btn-block btn-primary">Card 1</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-success">Card 2</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-info">Card 3</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-warning">Card 4</a></p> <p><a href="#" class="btn btn-outlined btn-block btn-danger">Card 5</a></p> </div> </div> </div> <hr>--> <div class="container"> <div class="row"> <p class="btn btn-outlined btn-block btn-primary">Card 1 <a href="#" class="btn btn-outlined btn-success">Port 1</a> </p> </div> <div class="row"> <p class="btn btn-outlined btn-block btn-primary">Card 1 <a href="#" class="btn btn-outlined btn-success">Port 1</a> </p> </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; }