Ionic Pill Buttons

I wanted these (round pill buttons)... I added these...

.button-bar.button-pill {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border-radius: 30px;

.button-bar.button-pill .button:first-child {
  -webkit-border-radius: 30px 0 0 30px;
  border-radius: 30px 0 0 30px;

.button-bar.button-pill .button:last-child {
  -webkit-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
} these.

<div class="button-bar button-pill">  
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
  <a class="button">Fourth</a>

I only put this up as it's own over-glorified blog post because deep down I wish there were more default CSS styles for the Ionic Framework. But then my pinky chimes in and reminds me that bloating the library with a wishlist would just made it slower on old Android phones.