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>

Maddoxswe · Accepted Answer · 2020-05-15 13:26:28Z

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

answered May 15, 2020 at 13:26

Maddoxswe

1458 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user12077300 · Accepted Answer · 2020-05-15 13:24:34Z

1

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

answered May 15, 2020 at 13:24

user12077300

Comments

atman_lens · Accepted Answer · 2020-05-15 13:24:46Z

0

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

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

answered May 15, 2020 at 13:24

atman_lens

8522 gold badges9 silver badges18 bronze badges

Comments

Quentin Grisel · Accepted Answer · 2020-05-15 13:26:59Z

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>

theFrontEndDev · Accepted Answer · 2020-05-15 13:28:24Z

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

answered May 15, 2020 at 13:28

theFrontEndDev

9832 gold badges20 silver badges44 bronze badges

Comments

CrystalSpider · Accepted Answer · 2020-05-15 13:53:37Z

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>

Collectives™ on Stack Overflow

Button color change on hover CSS

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related