Customize input and anchor elements in Vue Button component
11 Jun 20242 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.
<template>
<div>
<div>
<input type='button' value='Input Button' class='e-btn e-link' />
</div>
<br>
<div>
<a id='anchorbtn' class='e-btn e-primary' href='#'>Google</a>
</div>
</div>
</template>
<script setup>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
<div>
<div>
<input type='button' value='Input Button' class='e-btn e-link' />
</div>
<br>
<div>
<a id='anchorbtn' class='e-btn e-primary' href='#'>Google</a>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-button":ButtonComponent
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>