How to customize input and anchor elements in React Button

03 Sep 20261 minute to read

Native HTML input and anchor elements can be styled using predefined Syncfusion React Button classes. In the following example, the input element is styled as a link React Button with the e-btn e-link class, and the anchor element is styled as a primary React Button with the e-btn e-primary class.

<!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="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.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>
		<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>
</body>

</html>