Hover не работает на элементе кнопки

Question

Надеюсь, это будет легко исправить, но я попытался найти ответ, но ничего не подходит.

Я пытаюсь сделать эффект наведения на кнопку:

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;
}

Когда я проверяю это в браузере (vivaldi & edge), ничего не меняется. Кстати, тестовый участок http://wyrdling.com/skulpturjagt.

PS. Я пытался использовать инструмент разработчика Chrome, но я слишком новичок, чтобы понять, как его читать. XD

Answer 1

Вот несколько примеров плунжеров.

Пример 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>

Пример 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>

Answer 2

Если это не опечатка в вашем вопросе, вы используете .button:hover. Это будет применяться к элементам с классом hover. Поменяйте его на button:hover