JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customize Button Appearance in JavaScript (ES5) Button control

08 May 2023 / 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
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

var button = new ej.buttons.Button({cssClass: `e-custom`, content:'Custom'}, '#custombtn');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Button</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="custombtn"></button>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* To customize button appearance */
.e-custom {
  border-radius: 0;
  height: 30px;
  width: 80px;
}

.e-left-icon::before {
  content: '\e7d4';
}

.e-right-icon::before {
  content: '\e916';
}

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

button {
  margin: 25px 5px 20px 20px;
}

@font-face {
font-family: 'settings';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlm7/npHAAAAcgAAAEwaGVhZBKtDIMAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQCYAAAAAAHAAAAABm1heHABDgB0AAABCAAAACBuYW1lxmFdywAAAvgAAAIxcG9zdDwSCicAAAUsAAAANwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAMLNyX18PPPUACwPoAAAAANfSY9oAAAAA19Jj2gAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAACAGgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAmAAAAAIAAAAAA+oD6gALAGcAAAEOAQcuASc+ATceAQEVBgcnJiIPAQYUHwEOAQcjIgYdAR4BOwEWFwcGFB8BFjI/AR4BFxUeATsBPgE9ATY3FxYyPwE2NC8BPgE3MzI2PQE0JisBJic3NjQvASYiDwEuASc1LgEnIw4BAr4CcVVUcQMDcVRVcf7pOTRbBRQGUQYGWhAYB30LDgEPCX0OIVoHB1EFFQVbGTYeAQ4KcQsOOTRbBRQGUQYGWhAXB34LDQ8Jfg4gWgcHUQUVBVsZNh4BDgpxCQ8B9lRxAwNxVFVxAgJxAYd+DiBaBgZRBRUFWBk2Hg8KcQsOOTRbBxQHUQYGWhAYB30LDgEPCX0OIVoGBk4FFQVbGTYeDwpxCw06NFoIEwhRBgZaEBgHfQsNAQENAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBzZXR0aW5nc1JlZ3VsYXJzZXR0aW5nc3NldHRpbmdzVmVyc2lvbiAxLjBzZXR0aW5nc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcwBlAHQAdABpAG4AZwBzAFIAZQBnAHUAbABhAHIAcwBlAHQAdABpAG4AZwBzAHMAZQB0AHQAaQBuAGcAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcwBlAHQAdABpAG4AZwBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAA1zZXR0aW5ncy0tLTExAAAA) format('truetype');
font-weight: normal;
font-style: normal;
}

.e-btn-icons {
font-family: 'settings' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


.e-setting-icon::before {
  content: "\e700";
}
Previous
Next