Buttons

1. Button Variants: Angular Material buttons come in different variants, such as raised, outlined, and FAB (Floating Action Button). Choose the button variant that best suits your design requirements. As an example within our application, we utilized the following code, resulting in the following output:

<button mat-raised-button color="accent">CHANGE PREFERENCE</button>

1. CSS Classes: Add custom CSS classes to Angular Material buttons to apply your own styles. Utilize the class attribute to assign classes to button elements.

For the code example mentioned above, we incorporated a custom class and associated CSS styles in the _buttons.scss file.

<button mat-raised-button color="accent" class="button-rounded">CHANGE PREFERENCE</button>

.button-rounded {
  &.mat-raised-button {
    border-radius: 2rem;
    background-color: red;
    font-size:16px;
    height:48px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
}

We have applied custom styles to a basic mat button by adding the class name "button-rounded" in the HTML code above. The CSS code provided serves to modify the default styles of the mat-raised-button component, leading to the visual output depicted below.

1. Button Theming: Customize button theming by adjusting primary, accent, and warn colors within your custom theme. These colors impact button backgrounds, text, and other visual elements.

We customized the button theme to use the "success" color, which is represented by the green palette, and here is the corresponding code:

<button mat-raised-button color="success" class="button-rounded">CHANGE PREFERENCE</button>

%mat-success {
  $success: mat.define-palette(mat.$green-palette);
  background-color: mat.get-color-from-palette($success, 500);
  color: mat.get-color-from-palette($success, 500-contrast);
}

.mat-raised-button.mat-success {
  @extend %mat-success;
}

1. %mat-success (SCSS Placeholder):

   • %mat-success is a SCSS placeholder selector. It is not a class or ID that will be directly applied to HTML elements. Instead, it serves as a reusable block of styles that can be extended or included in other selectors.

2. Palette Definition:

   • $success: mat.define-palette(mat.$green-palette);

     • This line defines a SCSS variable $success and assigns it a color palette. It appears to be creating a custom palette called "success" by referencing Angular Material's built-in $green-palette.

3. Background Color and Text Color:

   • background-color: mat.get-color-from-palette($success, 500);

     • Sets the background color of elements using the color from the $success palette at the 500 shade (presumably a shade of green).

   • color: mat.get-color-from-palette($success, 500-contrast);

     • Sets the text color (foreground color) of elements using the color from the $success palette at the 500-contrast shade. This typically ensures that text on the button has sufficient contrast against the background.

4. Button Selectors

   .mat-raised-button.mat-success { @extend %mat-success; }

   • This block of CSS code applies the styles defined in %mat-success to buttons with the specified classes, effectively applying the custom "success" theme to these button types.

The end result is as follows: