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).
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 { }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 { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);/* 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%;
}