Question

I would like to create a bootstrap button with a divider inside of it.

On the left side of the divider there will be the button text aligned to the left.
On the right side of the divider there will be a plus / minus icon aligned to the center.
The divider will always be placed 33px from the right side of the button.
The divider will be colored white.

What is the best technique for creating such an effect?
(I prefer using css and fonts over images).

I cannot upload an example image cause i don’t have enough reputation, but i hope you got the idea 🙂

Thanks for the help!

Answer 1

I ended up defining a span inside the button (which is an tag).
The span is on the right of the button and contains the icon. I colored its left border white and gave the right padding so it will give the icon enough space and stretch to the top of the button.

The css code:

.btn-blue {
    /* Button definintion*/
}

.btn-blue-right-section {
    text-align:center;
    padding: 4px 0 5px 10px;
    margin-left: 10px;
    border-left: 1px solid #86c7fe;
}

.btn-blue-icon {
    color: white;
    width: 13px;
}

The result image: