is there any way to change the caption of buttons from capital letters to small letters, in materializedcss?

Question

I'm using materialized css to design my personal website. when I use the button, its caption is always shown in capital letters. I tried to change it but failed to do so. can anyone help me out with this, please?

Answer 1

Add this to your css

.btn {
    text-transform: unset !important;
}

or if you want to change it for specific buttons only, add this to your css :

.no-uppercase {
     text-transform: unset !important;
}

then just add no-uppercase to the desired buttons' classes.

---

Updated to newer syntax thanks to @ziganotschka

Answer 2

There has been a syntax change

• This syntax is deprecated now:

.btn {
  text-transform: none !important;
}

• The following syntax is now to be used (as of 02-02-2021):

.btn {
  text-transform: unset !important;
}

Answer 3

Yes can you just need to css in Button tag like below

<Button style={{color:'white',textTransform:'none'}}>Home</Button>

Answer 4

.btn {
  text-transform: initial !important;
}

If you use Vuetify, can follow the following.

.btn span.v-btn__content{
  text-transform: initial !important;
}

Looking forward to helping you.

Answer 5

you have to override the button class in your css file like below

span.MuiButton-label {
 text-transform: none;
 font-family: sans-serif !important; //change any font style
}