Ionic apply different button styles - css

Question

I want to apply different button styles in my view from my declared global button styles in theme/variables.scss
button_green{}
button_red{}
in my login.html
<button>Login</button> //should be green
<button>Logout</button> //should be red
How to assign different global styles to buttons without having individual component specific styles like
<button color='primary' font='xyz' size='n'>Login</button>
<button color='danger' hint='something'>Logout</button>
and more like this
<button style='button_green'>Login</button>
<button style='button_red'>Logout</button>

Answer 1

To use custom button style, You can follow my instruction below:
1- As you want to create global style, you need to add your style class in /theme/variables.scss as below:
Note: You need to add !important to overwrite default ionic style.
.button_green{
background-color: green !important;
}
.button_red{
background-color: red !important;
}
.button_blue{
background-color: blue !important;
}
.button_yellow{
background-color: yellow !important;
}
.button_pink{
background-color: pink !important;
}
.button_purple{
background-color: purple !important;
}
2- Then in *.html, you can call your css class like this:
<button ion-button class='button_green'>button_green</button>
<button ion-button class='button_red'>button_red</button>
<button ion-button class='button_blue'>button_blue</button>
<button ion-button class='button_yellow'>button_yellow</button>
<button ion-button class='button_pink'>button_pink</button>
<button ion-button class='button_purple'>button_purple</button>
3: As result you can see:
You can find full source code with this repository: Ionic Button Custom Collor.
I hope this will help you :)

Answer 2

If you want a custom button colors you can use below code -
1 - Declare below code in your CSS class
.font-size{
font-size : 2vw;
}
.red{
background-color: red ;
}
.blue{
background-color: blue ;
}
.green{
background-color: green ;
}
.yellow{
background-color: yellow ;
}
2.
<button ion-button class="font-size red">red</button>
<button ion-button class="font-size blue">blue</button>
<button ion-button class="font-size green">green</button>
<button ion-button class="font-size yellow">yellow</button>
Note - You can also use one class with another class