First, setting bootstrap, you can use Bootstrap CDN Links
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Second, setup The HTML
<div class="container">
<div class="row">
<h2>
Bootstrap Outline Buttons</h2>
Add the class <code>.outline</code> to any Bootstrap button style.<br />
<a class="btn btn-primary outline" href="https://www.blogger.com/null">Primary Button</a>
<a class="btn btn-success outline" href="http://www.fostrap.com/">Success Button</a>
<a class="btn btn-warning outline" href="http://www.fostrap.com/">Warning Button</a>
<a class="btn btn-danger outline" href="http://www.fostrap.com/">Danger Button</a>
<a class="btn btn-default outline" href="http://www.fostrap.com/">Default Button</a>
<br />
<h3>
Button Sizes</h3>
<a class="btn btn-primary outline btn-lg" href="http://www.fostrap.com/">Large Button</a>
<a class="btn btn-success outline btn-sm" href="http://www.fostrap.com/">Small Button</a>
<a class="btn btn-danger outline btn-xs" href="http://www.fostrap.com/">Extra Small Button</a>
</div>
</div>
Then, setup The CSS
body {
background-color : #ecf0f1
}
.outline {
background-color: transparent;
color: inherit;
transition: all .25s;
}
.btn-primary.outline {
color: #428bca;
}
.btn-success.outline {
color: #5cb85c;
}
.btn-info.outline {
color: #5bc0de;
}
.btn-warning.outline {
color: #f0ad4e;
}
.btn-danger.outline {
color: #d9534f;
}
.btn-primary.outline:hover,
.btn-success.outline:hover,
.btn-info.outline:hover,
.btn-warning.outline:hover,
.btn-danger.outline:hover {
color: #fff;
}