how to make button in ionic + css

I need to design toolbar in ionic .I am able to make that tool bar but it is not look similar to as in below pic.In given image buttons are small height , small font .Second thing it second button is bigger than than rest .In given image all button have different width .Can we make same button in ionic I tried to do so in ionic but I am not able to make same as above how I will make same this type of toolbar in ionic as show in image

here is my code

![<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

</body>
<ion-view>
    <ion-header-bar align-title="center" class="bar-balanced">
        <div class="buttons">
            <i style="font-size:30px;" class='icon ion-chevron-left'></i>
        </div>
        <h1 class="title">Account</h1>
    </ion-header-bar>
    <ion-content>
        <div class="button-bar">
            <a class="button" ui-sref="d" ui-sref-active="button-balanced">Details</a>
            <a class="button" ui-sref="lunch" ui-sref-active="button-balanced">Related</a>
            <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">sad</a>
            <a class="button" ui-sref="dinner" ui-sref-active="button-balanced">ss</a>
        </div>


    </ion-content>
</ion-view>
</html>]

try adding this in css at the bottom else you may need to use !important.

.button-bar > .button:first-child{
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.button-bar > .button:last-child{
    border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

I have updated the Sample

You need to check ionic doc, and more specially : http://ionicframework.com/docs/components/#button-sizes

There you can see that you can set up different size : I assume that if you change all your buttons with button-small that will make your trick <a class="button button-small" ui-sref="dinner" ui-sref-active="button-balanced">Disputes</a>