screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js Change Button Color on Hover</h3> <button :style="{ backgroundColor: isHovered ? 'red' : 'blue' }" @mouseover="isHovered = true" @mouseleave="isHovered = false"> Hover me! </button> </div> <script type="module"> const app = Vue.createApp({ data() { return { isHovered: false, }; }, }) app.mount('#app') </script> <style scoped> button { padding: 10px 20px; border: none; color: #fff; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; } </style> </body> </html>