Hover doesn't work on button element - css

Question

Hopefully this will be an easy thing to fix, but I have tried searching for an answer and nothing seems to fit.
I'm trying to make a hover effect on a button:
button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
color: black;
background-color: lightcyan;
}
When I test this in a browser (vivaldi & edge) nothing changes. The test site is http://wyrdling.com/skulpturjagt by the way.
PS. I tried using the chrome developer tool, but I'm too much of a newb to figure out how to read it XD

Answer 1

Unless its a typo in your question, you use .button:hover. That will apply to elements with a class of hover. Swap it to button:hover

Answer 2

Here are some example plunkers.
Example 1:
button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover {
color: black;
background-color: lightcyan;
}
<button>My button.</button>
Example 2 :
.button {
min-width: 20vw;
max-width: 40vw;
border: none;
color: white;
font-size: 1.5vw;
padding: 15px 32px;
text-align: center;
text-decoration: none;
background-color: blue;
border-radius: 20px;
transition: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
color: black;
background-color: lightcyan;
}
<button class="button">My button</button>