I'm currently working with VueJS and here is the CSS code I have:
.button-css {
align-items: center;
background-color: var(--azure-radiance);
border-radius: 30px;
display: flex;
height: 50px;
min-width: 200px;
padding: 0 60px;
}
.opensans-bold-white-18px {
color: var(--white);
font-family: var(--font-family-open_sans);
font-size: var(--font-size-xxxl);
font-style: normal;
font-weight: 700;
align-self: center;
}
After that, there's the Vue script:
new Vue({
el: "#app",
data: {
termsState: false,
validated: false
},
computed: {
termsError() {
return this.validated && !this.termsState
}
},
methods: {
handleTermsState() {
this.validated = false
},
handleSubmit() {
this.validated = true
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<label for="terms">
Terms and Privacy Policy
<input type="checkbox" id="terms" name="terms" v-model="termsState" @change="handleTermsState">
{{ termsState }}
</label>
<div><button class="button-css opensans-bold-white-18px" type="submit" :disabled="!termsState" @click="handleSubmit">Submit</button></div>
</div>
Currently, the button retains the CSS only when it is enabled, i.e., an 'oval shape button' when the checkbox is ticked. When it is disabled, it takes a gray rectangular shape as a button. I want to maintain the oval shape even in disabled mode. How can I achieve this?
Here are the before and after images:
https://i.sstatic.net/4frwO.png
https://i.sstatic.net/nIRdc.png
I'd like both the before and after images to be in an oval shape.