CODEWITHSUNDEEP
htmlcss
Alzira Barretto
Alzira Barretto

Reputation: 161

button hover color is not working

#button {
    margin-top: 5%;
    position: relative;
    left: 15%;
}

#button a{
    color: #15b097;
}

#button a:hover{
    color: white;
}
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <a class="btn btn-default" href="#" role="button" id="button">Create Account</a>
    </div>
  </div>

This is the first time it happen to me the button hover is not changing. It never happen to me I don't know what went wrong. Maybe there is particular went wrong I don't know. Hope I'm not confused you as I'm already confused here keeping changing the class name and didn't work. Only alignment is working. I did background-color as well as color.

Upvotes: 2

Views: 695

Answers (5)

Murad Hasan
Murad Hasan

Reputation: 9583

Your button is with the a tag, so don't need to use #button a.

Updated CSS:

#button {
    margin-top: 5%;
    position: relative;
    left: 15%;
    color: #15b097;
}

#button:hover{
    color: white;
}

Upvotes: 1

Ravi Bhushan
Ravi Bhushan

Reputation: 115

Simply use css as 

    #button:hover {   
            color: white;
        } 
// or .btn:hover{ } or a.btn:hover{ } or a#button:hover{ }

Upvotes: 0

Rayudu
Rayudu

Reputation: 71

You have written wrong css use bellow css

 a.btn-default:hover 
 {
    color: white;
  }

Upvotes: 0

kishan Radadiya
kishan Radadiya

Reputation: 832

Try this css i am sure that this is work properly:

#button {
    margin-top: 5%;
    position: relative;
    left: 15%;
    color: #15b097;
}

#button:hover{
    color: white;
}

Just Change your css main id and it's reference perameter. Just Remove "a" in all css which gives you as reference.

Upvotes: 0

Andy the android
Andy the android

Reputation: 179

#button{
    color: #15b097;
}

#button:hover{
    color: white;
}

this should do

Upvotes: 0

Related Questions