Kindly refrain from using !important in your responses. It is advisable to use more specific CSS instead.
To determine the property causing padding in a button, inspect it using the developer tools (F12) of your browser.
For instance, in the case of a mat-raised-button, you will see something like this:
<button _ngcontent-ng-c626419816=""
mat-raised-button="" color="primary"
class="mdc-button mdc-button--raised mat-mdc-raised-button mat-primary
mat-mdc-button-base"
mat-ripple-loader-class-name="mat-mdc-button-ripple" ng-reflect-color="primary">
<span class="mat-mdc-button-persistent-ripple mdc-button__ripple"></span>
<span class="mdc-button__label">Primary</span>
<span class="mat-mdc-focus-indicator"></span>
<span class="mat-mdc-button-touch-target"></span>
<span class="mat-ripple mat-mdc-button-ripple"></span>
</button>
Look at the "class":
mdc-button mdc-button--raised mat-mdc-raised-button mat-primary mat-mdc-button-base
The class indicating padding is mat-mdc-raised-button
.mat-mdc-raised-button {
font-family: var(--mdc-protected-button-label-text-font);
font-size: var(--mdc-protected-button-label-text-size);
letter-spacing: var(--mdc-protected-button-label-text-tracking);
font-weight: var(--mdc-protected-button-label-text-weight);
text-transform: var(--mdc-protected-button-label-text-transform);
height: var(--mdc-protected-button-container-height);
border-radius: var(--mdc-protected-button-container-shape);
padding: 0 var(--mat-protected-button-horizontal-padding, 16px);
box-shadow: var(--mdc-protected-button-container-elevation-shadow);
}
To make this class more specific, add a new class to the button
<button class="large-button" mat-raised-button>Basic</button>
In the global styles section (e.g., styles.scss or included in angular.json), apply the following:
.large-button.mat-mdc-raised-button {
padding: 32px
}
Now, all mat-raised-buttons with the class "large-button" will have a padding of "32px"
If there are multiple buttons within a div with a specific class, you can also do:
<div class="custom-nav-bar">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
</div>
// For more specificity:
.custom-nav-bar .mat-mdc-raised-button {
padding: 32px
}
When appending a new class, concatenate them together: class-button.our-custom-class. And for nested properties, use
.class-ppal.our-custom-class .another-class
NOTE: To modify styling across all buttons, alter the CSS variable within themes rather than individual classes
Learn more about Specificity here