<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="ui-group-buttons"> <button type="button" class="btn btn-primary btn-lg">Large button</button> <div class="or or-lg"></div> <button type="button" class="btn btn-success btn-lg">Large button</button> </div> <br /> <br /> <div class="ui-group-buttons"> <button type="button" class="btn btn-primary">Default</button> <div class="or"></div> <button type="button" class="button btn btn-success">Success</button> </div> <br /> <br /> <div class="ui-group-buttons"> <button type="button" class="btn btn-primary btn-sm">Small button</button> <div class="or or-sm"></div> <button type="button" class="btn btn-success btn-sm">Small button</button> </div> <br /> <br /> <div class="ui-group-buttons"> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <div class="or or-xs"></div> <button type="button" class="btn btn-success btn-xs">Extra small button</button> </div> </div> </div>

body { margin-top: 10px; } .ui-group-buttons .or { position: relative; float: left; width: .5em; height: 1.3em; z-index: 3; font-size: 12px; } .ui-group-buttons .or:before { position: absolute; top: 50%; left: 50%; content: 'OR'; background-color: #FFFFFF; margin-top: -.1em; margin-left: -.9em; width: 1.8em; height: 1.8em; line-height: 1.8em; color: #8A8A8A; font-style: normal; font-weight: 400; text-align: center; border-radius: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui-group-buttons .or:after { position: absolute; top: 0; left: 0; content: ' '; width: .3em; height: 2.84em; } .ui-group-buttons .or.or-lg { height: 1.3em; font-size: 16px; } .ui-group-buttons .or.or-lg:after { height: 2.85em; } .ui-group-buttons .or.or-sm { height: 1em; } .ui-group-buttons .or.or-sm:after { height: 2.5em; } .ui-group-buttons .or.or-xs { height: .25em; } .ui-group-buttons .or.or-xs:after { height: 1.84em; z-index: -1000; } .ui-group-buttons { display: inline-block; vertical-align: middle; } .ui-group-buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ui-group-buttons .btn { float: left; border-radius: 0; } .ui-group-buttons .btn:first-child { margin-left: 0; border-top-left-radius: .25em; border-bottom-left-radius: .25em; padding-right: 15px; } .ui-group-buttons .btn:last-child { border-top-right-radius: .25em; border-bottom-right-radius: .25em; padding-left: 15px; }