how to make button in ionic + css

Question

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>]

Karikalan · Accepted Answer · 2015-05-29 16:45:30Z

3

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

edited May 29, 2015 at 16:45

answered May 29, 2015 at 16:32

Karikalan

2532 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shruti Over a year ago

yes it is working but button text in elipsise form like in 1 and second button.I need the button text should display fully without using ellipse .please check image codepen.io/anon/pen/vOgmyd

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 29, 2015 at 16:28

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

Collectives™ on Stack Overflow

how to make button in ionic + css

2 Answers 2

1 Comment

Comments

Hot Network Questions