Ionic apply different button styles

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>

Why don't you simply declare css classes that you attribute to your buttons ? — saperlipopette
– saperlipopette, Commented Nov 14, 2018 at 14:44

Mankeomorakort · Accepted Answer · 2018-11-16 07:56:51Z

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 :)

@BongChannarith Ionic come scss. I think you cannot use less

TechValens · Accepted Answer · 2018-12-17 10:51:39Z

    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

Collectives™ on Stack Overflow

Ionic apply different button styles

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related