"Group Buttons"
Bootstrap 3.3.0 Snippet by BridgeUK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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: ' ';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: