I'm currently developing a calculator to practice my Vue.js 3 skills (I am new to vue). I've successfully implemented the basic features, but now I'm exploring how to incorporate hover animations on the buttons. Specifically, I want to differentiate the hover effects between white and orange buttons. Any guidance or suggestions would be greatly appreciated.
Below is the code snippet:
<div class="calculator">
<div class="display">{{ current || '0'}}</div>
<div @click="clear" class="btn">C</div>
<div @click="sign" class="btn">+/-</div>
<div @click="percent" class="btn">%</div>
<div @click="divide" class="operator">÷</div>
<div @click="append('7')" class="btn">7</div>
<div @click="append('8')" class="btn">8</div>
<div @click="append('9')" class="btn">9</div>
<div @click="multiply" class="operator">x</div>
<div @click="append('4')" class="btn">4</div>
<div @click="append('5')" class="btn">5</div>
<div @click="append('6')" class="btn">6</div>
<div @click="minus" class="operator">-</div>
<div @click="append('1')" class="btn">1</div>
<div @click="append('2')" class="btn">2</div>
<div @click="append('3')" class="btn">3</div>
<div @click="plus" class="operator">+</div>
<div @click="append('0')" class="zero">0</div>
<div @click="dot" class="btn">.</div>
<div @click="equal" class="operator">=</div>
</div>