CODEWITHSUNDEEP
css
Xuezheng Low
Xuezheng Low

Reputation: 65

CSS Button color only change word's background color no whole button when hover

I want make the button when hover change the background color but my css button only change the word's background color, not the whole button color when hover. Is something wrong in my css?

snippet added 

.popup1_btn {
    width: 210px;
    height: 45px;
    font-size: 20px;
    text-transform: uppercase;
    background-color: #d3db2c;
    color: black;
    cursor: pointer;
    margin: 30px auto 0;
    line-height: 45px;
    font-family:"Avant Garde Demi BT";}
 

    .popup1_btn :hover{
        	background-color: black;
        	color: #d3db2c;}
<div class="popup1_btn"><a href="http://example.com/">I'm Interested</a></div>

image link: https://i.sstatic.net/z5XoU.png

Upvotes: 0

Views: 798

Answers (1)

Koby Douek
Koby Douek

Reputation: 16675

Seems the space before the :hover in your CSS caused this problem.

After changing popup1_btn :hover to popup1_btn:hover, it works.

Here's a working snippet im which the entire button paints black on hover:

.popup1_btn {
    width: 210px;
    height: 45px;
    font-size: 20px;
    text-transform: uppercase;
    background-color: #d3db2c;
    color: black;
    cursor: pointer;
    margin: 30px auto 0;
    line-height: 45px;
    font-family:"Avant Garde Demi BT";}


.popup1_btn:hover{
    background-color: black;
    color: #d3db2c;
 }
<div class="popup1_btn"><a href="http://example.com/">I'm Interested</a></div>

Upvotes: 1

Related Questions