CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
abhishekrana
abhishekrana

Reputation: 144

Modify button style of bootstrap group

I was looking for a button group with 'OR' in between both buttons. I'm using bootstrap for this.

<div class="btn-group" role="group" >
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-default">or</button>
  <button type="button" class="btn btn-success">Save</button>
</div>

The output looks like this :

enter image description here

How do I turn this code to output something like this :

enter image description here

I tried styling the middle button border-radius but that was not as effective as well. Thanks for any help.

Upvotes: 0

Views: 924

Answers (2)

K K
K K

Reputation: 18099

You can use pseudo classes for this effect:

Demo: http://jsfiddle.net/GCu2D/913/

HTML:

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Cancel</button>
    <button type="button" class="btn btn-success">Save</button>
</div>

CSS:

.btn {
    width:80px;
}
.btn-default {
    position:relative;
    background:#f0f0f0;
}
button.btn.btn-default:before {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    border: 2px solid #fff;
    right: -2px;
    z-index: 10;
    height: 100%;
}
button.btn.btn-default:after {
    content:"or";
    position: absolute;
    right: -10px;
    border-radius: 100%;
    padding: 0 4px;
    background: #FFF;
    color: grey;
    z-index: 10;
    text-align: center;
}

Make sure you use more specific selectors to avoid other elements getting affected

Upvotes: 4

bbosternak
bbosternak

Reputation: 357

A little change in the HTML first:

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Cancel</button>
    <div class="btn-or">or</div>
    <button type="button" class="btn btn-success">Save</button>
</div>

And the CSS:

.btn-group button {
    border:0;
    width: 70px;
}
.btn-group .btn-default {
    background: #EEE;
    border-right: 2px solid #FFF;
}
.btn-group .btn-default:hover {
    background: #DDD;
}
.btn-group .btn-success {
    border-left: 2px solid #FFF;
}
.btn-or {
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #FFF;
    width:20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    z-index: 1000;
    font-size: 12px;
}

http://jsfiddle.net/czr6tohj/1/

Upvotes: 1

Related Questions