Custom Mat-Button in Angular 15

Flyer Coder
Flyer Coder
June 10, 2023
0
Custom Mat-Button in Angular 15



Download Code

Custom Theme Color



• Mat-Buttons with the current theme, you have the option to apply color using the color property. This allows you to set the background color of buttons to success, Warning, or danger, based on your preference.


import the Angular Material Button Module File


app.module.ts

import {MatButtonModule} from '@angular/material/button';

import {MatIconModule} from '@angular/material/icon';


Customize Mat Basic Button


app.component.html

<!----------- Success Theme ------------>

<button mat-button color="success" > Success Theme </button>

<!----------- Warning Theme ------------->

<button mat-button color="Warning" > Warning Theme </button>

<!----------- Danger Theme --------------->

<button mat-button color="danger" > Danger Theme </button>


app.component.scss

// Basic Button Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}


// Success Theme Change css

.mat-mdc-button.mat-success {

--mdc-text-button-label-text-color: #00c220 !important; // change button background color

--mat-mdc-button-ripple-color: rgba(0, 194, 32, 0.4) !important; // change button font color

--mat-mdc-button-persistent-ripple-color: #00c220 !important; // click to change button ripple color

}

.mat-mdc-button.mat-success:hover {

background-color: rgba(0, 194, 32, 0.08);

}


// Warning Theme Change css

.mat-mdc-button.mat-warning {

--mdc-text-button-label-text-color: #ffd900!important;

--mat-mdc-button-ripple-color: rgba(255, 217, 0, 0.4) !important;

--mat-mdc-button-persistent-ripple-color: #ffd900 !important;

}

.mat-mdc-button.mat-warning:hover {

background-color: rgba(255, 217, 0, 0.08);

}


// Danger Theme Change css

.mat-mdc-button.mat-danger {

--mdc-text-button-label-text-color: #fc3200 !important;

--mat-mdc-button-ripple-color: rgba(252, 50, 0, 0.4) !important;

--mat-mdc-button-persistent-ripple-color: #fc3200 !important;

}

.mat-mdc-button.mat-danger:hover {

background-color: rgba(252, 50, 0, 0.08);

}


.mat-mdc-button {

margin: 0 5px; // change margin between two buttons

}




Customize Mat Raised Button


app.component.html

<!----------- Success Theme ------------>

<button mat-raised-button color="success" > Success Theme </button>

<!----------- Warning Theme ------------->

<button mat-raised-button color="Warning" > Warning Theme </button>

<!----------- Danger Theme --------------->

<button mat-raised-button color="danger" > Danger Theme </button>


app.component.scss

// Raised Button Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}


// Success Theme Change css

.mat-mdc-raised-button.mat-success {

--mdc-protected-button-container-color: #00c220 !important // change button background color

--mdc-protected-button-label-text-color: #fff !important; // change button font color

--mat-mdc-button-ripple-color: rgba(0, 194, 32, 0.8) !important; // click to change button ripple color

}

.mat-mdc-button.mat-success:hover {

--mdc-protected-button-container-color: #d10046 !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}


// Warning Theme Change css

mat-mdc-raised-button.mat-warning {

--mdc-protected-button-container-color: #ffd900; // change button background color

--mdc-protected-button-label-text-color: #fff; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 187, 0, 0.6) !important; // click to change button ripple color

}

.mat-mdc-button.mat-warning:hover {

--mdc-protected-button-container-color: #d10046 !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}


// Danger Theme Change css

mat-mdc-raised-button.mat-danger {

--mdc-protected-button-container-color: #ff261e; // change button background color

--mdc-protected-button-label-text-color: #fff; // change button font color

--mat-mdc-button-ripple-color: rgba(0, 204, 17, 0.6) !important; // click to change button ripple color

}

.mat-mdc-button.mat-danger:hover {

--mdc-protected-button-container-color: #ffd900 !important; // hover to change button background color

--mdc-protected-button-label-text-color: #fff !important; // hover to change button font color

}


mat-mdc-raised-button {

margin: 0 5px; // change margin between two buttons

border-radius: none !important; // remove border-radius in button

}




Customize Mat Stroked Button


app.component.html

<!----------- Success Theme ------------>

<button mat-stroked-button color="success" > Success Theme </button>

<!----------- Warning Theme ------------->

<button mat-stroked-button color="warning" > Warning Theme </button>

<!----------- Danger Theme --------------->

<button mat-stroked-button color="danger" > Danger Theme </button>


app.component.scss

// Stroked Button Theme Change css

.mat-mdc-button.mat-mdc-button-base, .mat-mdc-raised-button.mat-mdc-button-base, .mat-mdc-outlined-button.mat-mdc-button-base {

height: 45px !important; // change button height

width: 90px !important; // change button width

-moz-osx-font-smoothing: grayscale; // for font-smooth

-webkit-font-smoothing: antialiased; // for font-smooth

font-family: Arial, Helvetica, sans-serif // change button font family

font-size: var(--mdc-typography-button-font-size, 17px); // change button font size

line-height: var(--mdc-typography-button-line-height, 36px); // change button font line-height

font-weight: var(--mdc-typography-button-font-weight, 400); // change button font-weight

letter-spacing: var(--mdc-typography-button-letter-spacing, 0.7px); // change button font-weight

}


// Success Theme Change css

.mat-mdc-outlined-button.mat-success {

--mdc-outlined-button-label-text-color: #00c220 !important; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 51, 0, 0.8) !important; // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: #00c220 !important; // change button outline color

}

.mat-mdc-outlined-button.mat-success:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}


// Warning Theme Change css

.mat-mdc-outlined-button.mat-warning {

--mdc-outlined-button-label-text-color: #ffd900 !important; // change button font color

--mat-mdc-button-ripple-color: rgba(255, 64, 129, 0.8) !important // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: #00c220 !important; // change button outline color

}

.mat-mdc-outlined-button.mat-warning:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}


// Danger Theme Change css

.mat-mdc-outlined-button.mat-danger {

--mdc-outlined-button-label-text-color: #f44336 !important; // change button font color

--mat-mdc-button-ripple-color: #00c220 !important; // change button ripple color

--mat-mdc-button-persistent-ripple-color: #000 !important; // change button persistent ripple color

--mdc-outlined-button-outline-color: rgba(255, 51, 0, 0.8) !important; // change button outline color

}

.mat-mdc-outlined-button.mat-danger:active {

--mdc-outlined-button-label-text-color: #fff !important; // click to change button font color

}


.mat-mdc-outlined-button {

margin: 0 5px; // change margin between two buttons

}




Customize Mat Flat Button


app.component.html

<!----------- Success Theme ------------>

<button mat-flat-button color="success" > Success Theme </button>

<!----------- Warning Theme ------------->

<button mat-flat-button color="warning" > Warning Theme </button>

<!----------- Danger Theme --------------->

<button mat-flat-button color="danger" > danger Theme </button>


app.component.scss

// Flat Button Theme Change css

mat-mdc-unelevated-button.mat-success {

--mdc-filled-button-container-color: #00c220 !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// Warning Theme Change css

mat-mdc-unelevated-button.mat-warning {

--mdc-filled-button-container-color: #ffd900 !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// Danger Theme Change css

mat-mdc-unelevated-button.mat-danger {

--mdc-filled-button-container-color: #ff261e !important; // change button background color

--mdc-filled-button-label-text-color: #fff; // change button font color

}

// button opacity fill when keyboard tab key use

::ng-deep .mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, ::ng-deep .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {

opacity: 0.5; // change button persistent ripple opacity

}




Customize Mat Icon Button


app.component.html

<!----------- Success Theme ------------>

<button mat-icon-button color="success">
    <mat-icon> home </mat-icon>
</button>

<!----------- Warning Theme ------------->

<button mat-icon-button color="warning">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Danger Theme --------------->

<button mat-icon-button color="danger">
    <mat-icon> favorite </mat-icon>
</button>


app.component.scss

// Icon Button Theme Change css

.mat-icon {

height: 40px !important; // change button height

width: 40px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 40px); // change button font size

}


// Success Theme Change css

.mat-mdc-icon-button.mat-success {

--mdc-icon-button-icon-color: #00c220 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #00c220 !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(0, 194, 32, 0.1) !important; // change button persistent ripple color

}

// Warning Theme Change css

.mat-mdc-icon-button.mat-warning {

--mdc-icon-button-icon-color: #ffd900 !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #ffd900 !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(255, 217, 0, 0.1) !important; // change button persistent ripple color

}

// Danger Theme Change css

.mat-mdc-icon-button.mat-danger {

--mdc-icon-button-icon-color: #ff261e !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #ff261e !important; // change button ripple color

--mat-mdc-button-ripple-color: rgba(255, 51, 0, 0.1) !important; // change button persistent ripple color

}


.mat-mdc-icon-button.mat-mdc-button-base {

width: 50px !important; // change button base width

height: 50px !important; // change button base height

padding: 10px 7px !important; // change button base padding

}


.mat-mdc-icon-button {

margin: 0 5px; // change margin between two buttons

}




Customize Mat FAB Button


app.component.html

<!----------- Success Theme ------------>

<button mat-fab color="success">class="customFab1">
    <mat-icon> home </mat-icon>
</button>

<!----------- Warning Theme ------------->

<button mat-fab color="warning">class="customFab2">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Danger Theme --------------->

<button mat-fab color="danger">class="customFab3">
    <mat-icon> favorite </mat-icon>
</button>


app.component.scss

// Fab Button Theme Change css

.customFab1 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 25px); // change button font size

}

.mat-mdc-fab.mat-success {

--mdc-fab-container-color: #00c220 !important; // change button background color

--mat-mdc-fab-color: #ffffff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



// Warning Theme Change css

.customFab2 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 30px); // change button font size

}

.mat-mdc-fab.mat-warning {

--mdc-fab-container-color: #ffd900 !important; // change button background color

--mat-mdc-fab-color: #ffffff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



// Danger Theme Change css

.customFab3 .mat-icon {

height: 35px !important; // change button height

width: 35px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 35px); // change button font size

}

.mat-mdc-fab.mat-danger {

--mdc-fab-container-color: #f44336 !important; // change button background color

--mat-mdc-fab-color: #ffffff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



.mat-mdc-fab {

margin: 0 5px; // change margin between two buttons

}




Customize Mat Mini-FAB Button


app.component.html

<!----------- Success Theme ------------>

<button mat-mini-fab color="success">class="customMiniFab1">
    <mat-icon> bookmark </mat-icon>
</button>

<!----------- Warning Theme ------------->

<button mat-mini-fab color="warning">class="customMiniFab2">
    <mat-icon> favorite </mat-icon>
</button>

<!----------- Danger Theme --------------->

<button mat-mini-fab color="danger">class="customMiniFab3">
    <mat-icon> delete </mat-icon>
</button>


app.component.scss

// Mini-Fab Button Theme Change css

.customMiniFab1 .mat-icon {

height: 20px !important; // change button height

width: 20px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 20px); // change button font size

}

.mat-mdc-mini-fab.mat-success {

--mdc-fab-container-color: #00c220 !important; // change button background color

--mat-mdc-fab-color: #fff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



// Warning Theme Change css

.customMiniFab2 .mat-icon {

height: 25px !important; // change button height

width: 25px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 25px); // change button font size

}

.mat-mdc-mini-fab.mat-warning {

--mdc-fab-container-color: #ffd900 !important; // change button background color

--mat-mdc-fab-color: #fff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



// Danger Theme Change css

.customMiniFab3 .mat-icon {

height: 30px !important; // change button height

width: 30px !important; // change button width

overflow: auto !important; // for button overflow

font-size: var(--mdc-typography-button-font-size, 30px); // change button font size

}

.mat-mdc-mini-fab.mat-danger {

--mdc-fab-container-color: #f44336 !important; // change button background color

--mat-mdc-fab-color: #fff !important; // change button icon color

--mat-mdc-button-persistent-ripple-color: #fff !important; // change button persistent ripple color

--mat-mdc-button-ripple-color: rgba(255, 255, 255, 0.1) !important; // change button ripple color

padding: 10px 8px !important; // change button padding

}



.mat-mdc-icon-button {

margin: 0 5px; // change margin between two buttons

}




Tags
Flyer Coder

Flyer Coder

"Hello! My name is Haresh Thumar, and I am a senior web developer. I have a passion for creating innovative and user-friendly websites that deliver exceptional experiences. I have a strong foundation in front-end development, with expertise in HTML, CSS, JavaScript, Typescript, Bootstrap 4 & 5, Angular Material UI & Materialize CSS, SCSS. I enjoy crafting visually appealing and responsive user interfaces that engage visitors and provide intuitive navigation. I stay updated with the latest trends and best practices in front-end development to ensure that the websites I build are modern and optimized for performance.

You may like these posts

Show more

Post a Comment

0 Comments

DO leave your comment

Post a Comment (0 )