CODEWITHSUNDEEP
htmlcsshover
rory-h
rory-h

Reputation: 680

css hover on a link - not working

This is the site

The last section has a button - Join Now.

At the moment the button on hover has - green background and white text. I wanted it to be white background and green text.

I tried this code :

 .joen_now_part h6 a:hover {
   background-color: #fff;
   color: #2a8a15;

 }

But for some reasons nothing changes.

Help and suggestions will be greatly appreciated.

Upvotes: 0

Views: 67

Answers (2)

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

there is already some class applied so have to overwrite the class

this is the default class its applying

a:hover, a:focus, a:active {
    background-color: #2a8a15;
    color: #fff;
}

so u have to add this 

 .joen_now_part h6 a:hover {
   background-color: #fff !important;
   color: #2a8a15 !important;

 }

for reference

Upvotes: 1

Bubblesphere
Bubblesphere

Reputation: 449

Try something like this codepen

.yourButton {
  background: transparent;
  border: 2px solid #2a8a15;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: Uppercase;
  color: #2a8a15;
  font-family: 'Lato', sans-serif;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.yourButton:hover, yourButton:focus, yourButton:active {
  background: #FFFFFF;
  color: #2a8a15;
}

Upvotes: 0

Related Questions