0

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>

6 Answers6

3

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;
}
Maddoxswe
  • 145
  • 8
1

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

0

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

.btn-login:hover {
   background-color: #FFF;
}
atman_lens
  • 474
  • 2
  • 6
  • 16
0

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>
Quentin Grisel
  • 4,794
  • 1
  • 10
  • 15
0

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 )
}
theFrontEndDev
  • 890
  • 1
  • 17
  • 41
0

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>
CrystalSpider
  • 377
  • 7
  • 16