1

In w3schools CSS framework there are some predefined buttons and predefined settings for this buttons. I've already changed the color of them by adding to my HTML file the .class(.w3-button) in the style element at the head section but I cannot do the same with hover settings. 

<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
      background-color: #8B4513;
      box-shadow: 2px 5px 5px  black;
      border-radius: 4px;
      color:black;
      }
      
  .w3-hover-green { <!-- I've tried to that but it didnt work -->
  background-color: #D2691E;
  color: white;
}
 </style>
 
 <body>
 <p><button class= "w3-button w3-hover-green"> button </button> </p>

Any idea?

Santiago Madrid
  • 99
  • 9

2 Answers2

1

The trick to override the w3-button hover style in W3.CSS is to use the CSS !important exception.

Although I believe !important should be avoided whenever possible, this is actually how the "official" W3.CSS custom themes work, as you can see on the W3.CSS Color Generator page.

A simplified example:

      
a.custom-hover-color:hover { 
  background-color: orange !important;
  color: red !important;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<a class= "w3-button w3-green custom-hover-color"> click me </a>

EDIT:

In some cases it may be necessary to use cascade layers to override the !important styles, as described here.

For example, here we use the fact that an !important layered author style has higher precedence than an !important unlayered author style, to make sure a custom color persists during hover:

@layer moreImportant {
  .my-color {
    background-color: purple !important;
    color: lightsalmon !important;
  }
}

.w3-button:hover {
  filter: brightness(150%);
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<a class="w3-button my-color"> hover here </a>

We could also use layer order, and @import w3.css into a separate layer below the moreImportant layer.

More insight:

djvg
  • 11,722
  • 5
  • 72
  • 103
0

Hey in the last section of code the <p><button class= "w3-button (ADD A DOT HERE)w3-hover-green"> button </button> </p> please add a dot before the "w3-hover-green"

Good luck!

Snaxet
  • 87
  • 8
  • I'm not sure if I understand. You mean to do class=w3-button .w3-hover-green" ?. If that is what you mean, it didn't work. – Santiago Madrid May 10 '19 at 15:13
  • That's weird becuase I went in the w3schools own type editor and tried it and it worked fine for me.. – Snaxet May 10 '19 at 15:18
  • https://ibb.co/jhQNHFW As you can see, the button turns into grey which is not the color that I'm specifying at the .w3-hover-green class in the style element. – Santiago Madrid May 10 '19 at 15:37
  • Oh just figured it out, please change the text in .w3-hover-green to .w3-hover-white in order to get white. So : ```.w3-hover-white { background-color: #D2691E; color: white; ``` – Snaxet May 10 '19 at 16:23
  • And remember to change the last column of code aswell to ```

    ```     – Snaxet May 10 '19 at 16:24