"Outlined square buttons"
Bootstrap 3.0.0 Snippet by msurguy

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

Similar snippets: See More


Comments:

Guest 2013-10-23 05:52:25
    I'd prefer if there is an extra CSS class, e.g. btn-outlined, next to the official Bootstrap ones and the new styling is applied only for them.
maxsurguy 2013-10-23 06:17:23
    Thanks! I'll update the snippet!
joe 2014-07-29 18:44:39
    Typo. On line 18 you should replace ":" with a semicolon.
schel4ok 2014-12-08 19:18:26
    I try to use this style in Joomla 3.3 protostar template (bootstrap included). And it works strange. Hover state seems to be with border: 0px, because button became a little bit smaller. Even if I add border-width:3px!important to hover state doesn't change anything.
Rhuan 2015-10-09 02:57:17
    There's an error at line 18.
An invalid character at the end of line.
Rhuan 2015-10-09 02:57:45
    Thanks for the awesome CSS template :D

Commenting will be back soon.