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 { enableRipple } from '@syncfusion/ej2-base';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To customize Button appearance.
// Refer the "e-custom" class details in "styles.css".
class App extends React.Component<{}, {}> {
public render() {
return (
<ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>
);
}
}
ReactDom.render(<App />,document.getElementById('button'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='button'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>/* 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;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To customize Button appearance.
// Refer the "e-custom" class details in "styles.css".
class App extends React.Component {
render() {
return (<ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>);
}
}
ReactDom.render(<App />, document.getElementById('button'));