Inline bar buttons outlined

Hi i tryed like this:

<div class="button-bar bar-dark">
  <a class="button button-calm button-outline button-clear">Popular</a>
  <a class="button button-assertive button-outline button-clear">Newests</a>
</div>

but the result is really not good, the right button has left border while the left one has no border on the left side, how do you achive this (to put outlined buttons inline) correctly?

<div class="button-bar">
    <a class="button button-outline button-assertive" style="border-right: 1px solid;">Popular</a>
    <a class="button button-outline button-positive">Newests</a>
</div>

You could make a css class to mimick this behaviour like:

.button-bar > button-outline:first-of-type {
  border-right: 1px solid;
}

Note that you might want to add a margin somewhere as well :slight_smile:

Ok thank you :slight_smile: a lot

1 Like