Innovation Cloud btn:hover

I see there is a .btn class setup with a :hover pseudo selector as shown here:
`.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;

.btn-header {
background: #000;
color: #fff;
font-size: 16px;
padding: 10px 50px 10px 50px;
text-decoration: none;

Do I have to set a specific .btn-header:hover pseudo selector if I want to apply a background hover color for the header button? If so what is the point of the .btn:hover that is in the CSS by default when you start the project?

Hey James,

Looking through my code, I don’t see anything targeting .btn-header. Was that something you wrote yourself?

Yes, unless .btn-header also has the .btn class, in which case the other CSS rule you show will change it’s color without you adding anything else.

Would you mind copy/pasting your code into the forums here? I think I need to know a few more things about your code before I can answer that.
See here for how to make it show up properly:


Thanks guys I ended up figuring this out. My selector I added was overwriting the other one.

1 Like