Button color change on hover CSS

Question

The subject exists on Stackoverflow but I don't understand my problem in CSS.

How can I change a button's color on hover?

I have a login button, when I wish to hover the button. One white background should appears.

I get a small background color.

 body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; }.btn-login a:hover { color: black; background-color: #FFF; }

 <div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>

Answer 1

Change so that you hoover the button and not the a tag to change the background. And then you should change the color of the a tag. Example css below.

.btn-login:hover {
    background-color: #FFF;
}

.btn-login:hover a {
     color: black;
}

Answer 2

You should use ".btn-login:hover " instead of ".btn-login a:hover", this is going to work.

Answer 3

You need to change the background color of .btn-login not .btn-login a

.btn-login:hover {
   background-color: #FFF;
}

Answer 4

You are setting the hover on your a tag, that's why your background-color changes when you hover the a . You can change as following:

 body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; } /* Here are the modified css */.btn-login:hover { color: black; background-color: #FFF; }.btn-login:hover a { color: #000; }

 <div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>

Answer 5

You are given the hover effect for a inside the button. Thats why only a is changing the color on hover. Change the line to:

.btn-login:hover {
   background-color: #ffffff;  ( Your desired color )
}

Answer 6

The problem here is that you're not using a button but an <a> element, so when you change the background for the <a> element only the background of the writing changes. To change the background of the whole 'pseudo' button you need to change the background color of the <div> containing the <a> element while changing also the <a> element.

Your code modified accordingly to what said above:

 body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; }.btn-login:hover{ color: black; background-color: #FFF; }.btn-login:hover a{ color: black; }

 <div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>