Sharing Tutorial, Template dan Widget Blogger

March 10, 2016

Bootstrap 3 Outline Buttons Snippet

  1 comment
bootstrap 3 outline button

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;
}

Subscribe to our Newsletter

Wisnu ST

Yo! I'm Wisnu ST. I'm surfers search engine. I'm blogger. I'm cat lovers. Im everywhere. I'm based in Tangerang, Hire me!

1 comment :