Background button will not hover in different color

debugcn Published at Dev

Christian Luneborg

And the arrow on the right button disappeared. When hovered the blue color changes to a lighter blue with darker arrow and text.

HTML

<div class="fluid FindHome-div">
    <h1>
        <a href="http://www.ntreisinnovia.net/ntr/idx/index.php?key=b74b4ef49443e4ac6699324016bbaec5" class="FindHome" target="_blank">Find your home</a>
    </h1>
 </div>

CSS

.FindHome {
     background-color:#09F; 
     width:300px; 
     border:1px solid #09F;      
     padding:10px 40px 10px 15px;  
     border-radius:5px; 
     display:block; 
     margin-left:auto; 
     margin-right:auto;   
     background: #09F url('../img/arrow.png') no-repeat; 
     background-position:320px center;   
     margin-bottom:35px; 
     overflow: hidden; 
     text-decoration:none; 
     color:#ffffff;
 }

.FineHome a:hover {background:#ffffff;}
.FindHome-div{display:inline-block;}

JSFIDDLE

Pevara

There are 2 mistakes in your css:

.FineHome should be .FindHome
The a has the class .FindHome, and is not a child as your css presumes. You should change .FindHome a:hover to a.FindHome:hover or .FindHome:hover

http://jsfiddle.net/nA4P9/11/

Off topic:
May I also suggest that your choice of naming makes things quite hard to read and difficult to reuse imo. I would go for something like this:

HTML

 <div class="fluid find-home">
    <h1>
        <a href="..." class='cta-button' target="_blank">Find your home</a>
    </h1>
 </div>

css

 .cta-button {
         background: #09F; 
         ...
     }
    .cta-button:hover {
         background: #fff;
         ...
    }
    .find-home {
         display: inline-block;
         ...
    }

Collected from the Internet

Please contact [email protected] to delete if infringement.