how to make button in ionic + css


Tags: jquery,angularjs,css3,ionic-framework,ionic

Problem :

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


Solution :

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


    CSS Howto..

    How to make fonts display on web cross-platform?

    Show an image from b&w to color as if it were loading (left to right)

    How do I find out which style is overriding another style?

    How to put an image at the left side of text without putting the image into css

    Timeline divs not showing in Safari 5

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to centre a table in html using css file? [duplicate]

    How to segment a circle with different colors using CSS

    In the ordered sequence of words: “Word1, Word2, Word3”: how to have 1 and only 1 hyperlink on “Word1” & “Word3”? Thus, skip a word in a single link?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    IE11: How to prevent sprite animating to correct co-ords

    Use anchors and :target for navigation. How to show first layer by default

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?

    how to apply CSS styles in current document recieved from AJAX request?

    How to extract text from contenteditable div (but not html tags)

    How to set a relative position/size to the screen for elements in CSS/HTML? [closed]

    How to use HTML-CSS on outputting data conditionally?

    How to center align

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    how to swap div with one another in mobile view css

    How to use CSS transition for existing list items to make room for new ones?

    How to temporarily add a CSS style?

    How to apply css hover on multiple elements

    How to highlight widget title with CSS?

    How to remove a div with fade out effect in JavaScript?

    How to reference JSF image resource as CSS background image url

    How to override Liferay core' css?

    How do I remove applied css on a div by JQuery?

    how to add border to CSS only speech bubble

    How to define multiple CSS attributes in JQuery?