How can I change the width of angular material button? [duplicate]

How can I change the width of angular material button? I am using angular 6.

4 Answers

You could attach a class and manipulate that.

<button mat-raised-button>Show</button>

then in the CSS / SASS file

.my-class{ width: 100px!important; min-width: unset!important;
}

This should ensure the attribute is overwritten. BR

You can write it like this:

<button mat-raised-button>BUTTON</button>

Or in CSS, without !important property:

mat-raised-button { width: 50px;
}

Merely add a style attribute (a way of diverses to do it) :

 <button mat-raised-button color="primary">Primary</button>

Supposing this is your button:

<button mat-button color="primary">Primary</button>

You can go ahead an add id to button:

#myButton {
width: 150px;
}