How to do this button?

Ionic Framework
1

I don’t know how to arrange this button to make it look like the the one on the right side. I just want to put the text below.

1

My code goes like this
2

2 Likes
2

Try this code:
you can do with css.

.capital{
  display: block;
}
3

It didn’t work.

.capital{
     display:block;
     text-transform:capitalize;
}
4

put your code not image, just copy & paste here

5 
<ion-row justify-content-center align-items-center>
      <ion-button fill="clear" color="dark">
        <ion-icon name="megaphone" size="large"></ion-icon>
        <ion-label class="capital" expand="block">Speaker</ion-label>
      </ion-button>
      <ion-button fill="clear" color="dark">
          <ion-icon name="keypad" size="large"></ion-icon>
          <ion-label class="capital">Keypad</ion-label>
      </ion-button>
      <ion-button fill="clear" color="dark">
          <ion-icon name="volume-high" size="large"></ion-icon>
          <ion-label class="capital">Volume Up</ion-label>
      </ion-button>
  </ion-row>
6 
<ion-button fill="clear" color="dark" class="keypad-button">
      <div class="keypad-button-inner">
        <ion-icon name="keypad" size="large"></ion-icon>
        <ion-label>Keypad</ion-label>
      </div>
    </ion-button>

.keypad-button {
height: auto;
}

.keypad-button-inner {
display: flex;
flex-direction: column;
align-items: center;
}

1 Like
7

Thank you so much. That actually did work. Appreciate it

8

page.html

    <ion-row justify-content-center align-items-center>
      <ion-button fill="clear" color="dark">
        <div>
          <ion-icon name="megaphone" size="large"></ion-icon>
          <ion-label class="capital" expand="block">Speaker</ion-label>
        </div>
      </ion-button>
      <ion-button fill="clear" color="dark">
        <div>
          <ion-icon name="keypad" size="large"></ion-icon>
          <ion-label class="capital" expand="block">Keypad</ion-label>
        </div>
      </ion-button>
      <ion-button fill="clear" color="dark">
        <div>
          <ion-icon name="volume-high" size="large"></ion-icon>
          <ion-label class="capital" expand="block">Volume Up</ion-label>
        </div>
      </ion-button>
    </ion-row>

page.scss

ion-button{
  height: auto;
}

.capital{
  display: block;
}

hope it help you :slight_smile: