Material Design Lite button sizing

user_7343322 0
Viewed 5814

I am using the Google Material Design Lite CSS library (https://getmdl.io/components/#buttons-section) and I can't seem to change the button size even with inline style.

This is the button I am trying to use: 

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
    <i class="material-icons">add</i>
</button>

I tried added inline code like this but it's not working:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px"">
  <i class="material-icons">add</i>
</button>

Anyone has any idea how to change the button size in MDL?

material-design css
2 Answers

This works for me.

button.my-button {
width: 47px;
height: 30px;
min-width: initial;
padding: 0px 0px; //give me more space
font-size: 13px;
line-height: 0px; //make text middle vertically
}
user_44857930
Related