Search results

Customize Button Appearance in Angular Button component

14 Apr 2021 / 1 minute to read

You can customize the appearance of the button by using the Cascading Style Sheets (CSS). Define the CSS according to your requirement, and assign the class name to the cssClass property. In the following code snippet the background color, text color, height, width, and sharp corner of the button can be customized through the e-custom class for all states (hover, focus, and active).

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['styles.css'],
    template:  `<!-- To customize Button appearance. -->
                <!-- Refer the "e-custom" class details in "styles.css"-->
                <button ejs-button cssClass="e-custom">Custom</button>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
/* To customize button appearance */
.e-custom {
  border-radius: 0;
  height: 30px;
  width: 80px;
}

.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
  background-color: #ff6e40;
  color: #fff;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}