styles.css

#menu .toolbar-view .modes {
  float: right;
  height: 50px;
  padding: 10px;
  overflow: hidden;
}

#menu .toolbar-view .modes a {
  display: block;
  float: left;
  line-height: 30px;
  height: 30px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  background: #3B3B3B;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.70);
  box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.70);
}

#menu .toolbar-view .modes a.toggle-publish {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#menu .toolbar-view .modes a.active {
  color: #fff;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #000;
}

toolbar_buttons.html

<div class="toolbar-inner">
   <div class="groups">
      <div class="workflows group"><a href="#" class="new-document"><i class="icon-file-alt"></i><span class="label">New</span></a><a href="#" class="toggle-annotation save control disable"><i class="icon-save"></i><span class="label">Save</span></a><a href="#" class="toggle-annotation undo control"><i class="icon-undo"></i><span class="label">Undo</span></a><a href="#" class="toggle-annotation redo control"><i class="icon-rotate-right"></i><span class="label">redo</span></a></div>
      <div class="workflows group"></div>
   </div>
   <div class="modes"><a href="#" class="toggle-edit active"><i class="icon-pencil"></i>&nbsp;&nbsp;<span class="label">Edit</span></a><a href="#" class="toggle-publish"><i class="icon-eye-open"></i>&nbsp;&nbsp;<span class="label">Preview</span></a></div>
   <div class="context-bar"></div>
</div>