Как заставить функцию наведения на элементе кнопки работать при использовании внешнего листа CSS?

Question

Я использую внешний лист CSS и хочу, чтобы мои кнопки имели эффект наведения, все примеры, которые я нахожу при поиске в Интернете, относятся к встроенному CSS, как я могу заставить эффект работать при использовании внешнего листа CSS, в примерениже работает # кнопка, но не работает #button: hover

#button {
    margin: auto;
    font-size:24px;
    border-radius:8px;
    padding: 10px;
}

#button:hover{
    color:black;
}

HTML-код для кнопок:

   <div id="nav">
        <button id="button">Clothing </button>
        <button id="button">Accessories</button>
        <button id="button">About</button>
        <button id="button">Contact</button>
        <button id="button">News</button>
    </div>

Answer 1

Цвет только меняет цвет текста.Вместо этого используйте фон вместо

Вот кодекс, который я создал, который может помочь вам

Answer 2

Попробуйте написать это так.Таким образом, вместо использования атрибута 'color'

#button:hover {background-color:black;}