Cant get hover to work on login button

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>

Johannes · Accepted Answer · 2017-07-02T00:46:17.580

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>

score 1 · Answer 2 · answered Jul 02 '17 at 00:51

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 -->

Cant get hover to work on login button

2 Answers2