Cant get hover to work on login button - html

Question

I want to be able to change the color of my login button (the button with the id= "loginbtn") when I hover over it, here is the html code:
<template >
<div class="login background" style="height:100%" >
<div style="color:#76323F">{{error}}</div>
<button id="signbtn" v-on:click="signup">Signup</button>
<button v-on:click="calendar">Calendar</button>
<div>
<div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="margin-top:300px" >
<div class="input-group" style="margin-top:15px;">
<span class="input-group-addon" id="basic-addon1" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;" > <span class="glyphicon glyphicon-user"></span></span>
<input type="text" v-model="username" id="inputUsername" name="username" class="form-control col-lg-1" required autofocus placeholder="Username" aria-describedby="basic-addon1" style="opacity:.8;color:#76323F;font-weight:bold;">
</div>
<div class="input-group" style="margin-top:15px;">
<span class="input-group-addon" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required autofocus style="opacity:.8;color:#76323F;font-weight:bold;"/>
</div>
<button id="loginbtn"v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#C09F80;color:#C09F80;background-color:#76323F;border-color:#76323F;margin-top:20px;}" type="submit">Log in</button>
</div>
</div>
</div>
</template>

Answer 1

Use #loginbtn:hover { background-color:yellow; } (or whatever color you want) in your CSS.
And if that doesn't work because of the inline-styles you are using, move those inline styles out of the HTML code into the style sheet:
#loginbtn {
color: #C09F80;
background-color: #76323F;
border-color: #76323F;
margin-top: 20px;
}
#loginbtn:hover {
background-color: yellow;
}
<button id="loginbtn" v-on:click="submit" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>

Answer 2

If you only want to change the color of a single button (not a class of buttons) on hover, then you can add these attributes to the tags:
onMouseOver="this.style.color='#HexCodeForHoverColor'"
onMouseOut="this.style.color='#HexCodeForNormalBackground'"
You can also change color to backgroundColor -- not sure which one you'd want for what you're doing.
I can include CSS code to achieve the same thing if you want, but it's not really necessary if you only want to do this for one button.
A very similar question was asked here (Alex S. posted basically the same answer that I'm giving you).
Here's a demo. Obviously this is very basic in appearance.
<button onMouseOver="this.style.color='#00ffff'"
onMouseOut="this.style.color='#000000'">Test</button> <!-- Example of text color -->
<br>
<button onMouseOver="this.style.backgroundColor='#00ffff'"
onMouseOut="this.style.backgroundColor=''">Test</button> <!-- Example with background color -->