A Pen by Seth Broweleit.

index.html

<div class="topcoat-button-bar full">
   <div class="topcoat-button-bar__item">
     <button class="topcoat-button-bar__button full">One</button>
   </div>
   <div class="topcoat-button-bar__item">
     <button class="topcoat-button-bar__button full">Two</button>
   </div>
   <div class="topcoat-button-bar__item">
     <button class="topcoat-button-bar__button full">Three</button>
   </div>
  <div class="topcoat-button-bar__item">
     <button class="topcoat-button-bar__button full">Four + lots of text but this cell is the same size as its siblings bla bla bla bla</button>
   </div>
</div>

style.css

.full {
  width: 100%;
}


.button-bar,
.topcoat-button-bar {
  display: table;
  table-layout: fixed;
  white-space: no-wrap;
  margin: 0;
  padding: 0;
}

.topcoat-button-bar__item {
  display: table-cell;
  width: auto;
  border-radius: 0;
}

.topcoat-button-bar > .topcoat-button-bar__item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.topcoat-button-bar > .topcoat-button-bar__item:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.topcoat-button-bar__item:first-child > .topcoat-button-bar__button {
  border-right: none;
}

.topcoat-button-bar__item:last-child > .topcoat-button-bar__button {
  border-left: none;
}

.button,
.topcoat-button-bar__button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  background-clip: padding-box;
  color: inherit;
  vertical-align: top;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  cursor: default;
  user-select: none;
}

.topcoat-button-bar__button {
  padding: 0 1.25rem;
  border: 1px solid #a5a8a8;
  /* Important inheritance to manipulate border radius from parent */
  border-radius: inherit;
  background-color: #e5e9e8;
  -webkit-box-shadow: inset 0 1px #fff;
  box-shadow: inset 0 1px #fff;
  color: #454545;
  text-shadow: 0 1px #fff;
  line-height: 3rem;
}

Topcoat-Button-Bar.markdown

Topcoat Button Bar

Default style for Topcoat Button Bar. Requirements are portable and accessible markup with flexible and performant css. No javascript required

A Pen by Seth Broweleit on CodePen.

License.