CODEWITHSUNDEEP
css
user13548628
user13548628

Reputation:

Button color change on hover CSS

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>

Upvotes: 0

Views: 538

Answers (6)

CrystalSpider
CrystalSpider

Reputation: 389

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>

Upvotes: 0

theFrontEndDev
theFrontEndDev

Reputation: 973

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

Upvotes: 0

Quentin Grisel
Quentin Grisel

Reputation: 4987

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>

Upvotes: 0

Maddoxswe
Maddoxswe

Reputation: 145

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

Upvotes: 3

atman_lens
atman_lens

Reputation: 802

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

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

Upvotes: 0

user12077300
user12077300

Reputation:

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

Upvotes: 1

Related Questions