Customize input and anchor elements in EJ2 JavaScript Button control

2 May 20232 minutes to read

You can customize the appearance of the input and anchor elements using predefined styles through the class property. In the following code
snippet, the input element is customized as a link Button by setting the e-btn e-link class, and the anchor element is customized as a
primary Button by setting the e-btn e-primary class.

index.ts
index.html

<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div>
        <input type="button" id="inputbtn" value="Input Button" class="e-btn e-link">
    </div><br>
    <div>
        <a id="anchorbtn" class="e-btn e-primary" href="#">Google</a>
    </div>


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