JSFiddle - React, Tailwind, and code Playground

Custom Bootstrap Button OR Groups

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<h1>Custom Bootstrap Button OR Groups</h1>
<div class="ui-group-buttons"> <a href="" class="btn btn-success" role="button"><span class="glyphicon glyphicon-thumbs-up"></span></a>

    <div class="or"></div> <a href="" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-thumbs-down"></span></a>

</div>
<div class="ui-group-buttons"> <a href="" class="btn btn-success" role="button"><span class="glyphicon glyphicon-floppy-disk"></span></a>

    <div class="or"></div> <a href="" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-trash"></span></a>

</div>
<br />
<br />
<div class="ui-group-buttons"> <a href="" class="btn btn-success" role="button"><span class="glyphicon glyphicon-ok"></span> Sign Up</a>

    <div class="or"></div> <a href="" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-remove"></span> Reset</a>

</div>
<br />
<br />
<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...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
 body {
    padding: 2% 3%;
    font-family:'Dosis';
    background: #f0f0f0;
}
* {
    border-radius: 0 !important;
}
h1 {
    margin-top: 0;
    margin-bottom: 30px;
    color: #4679bd;
    font-weight: 400;
}
.ui-group-buttons .or {
    position:relative;
    float:left;
    width:.3em;
    height:1.3em;
    z-index:3;
    font-size:12px
}
.ui-group-buttons .or:before {
    position:absolute;
    top:50%;
    left:50%;
    content:'or';
    background-color:#f0f0f0;
    margin-top:-.1em;
    margin-left:-.9em;
    width:1.8em;
    height:1.8em;
    line-height:1.55;
    color:#444444;
    font-style:normal;
    font-weight:400;
    text-align:center;
    border-radius:500px;
    -webkit-box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1);
    -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;
    background-color:rgba(0, 0, 0, 0);
    border-top:.6em solid #f0f0f0;
    border-bottom:.6em solid #f0f0f0
}
.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...

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0