Как изменить цвет текста кнопки при наведении курсора в любом месте кнопки, а не только на текст?

Question

Я пытаюсь создать простую кнопку, где цвет фона и цвет текста меняют цвет при наведении курсора.Цвет фона у меня есть, но цвет текста меняется только при наведении курсора на текст. У меня есть CodePen для примера , и вот код, который я использовал:

button {
    background: #4e368f;
    color: #ccc;
    padding: 10px 30px;
    margin-top: 0;
    border: 0;;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
button:hover { background: #5e4999; }
button.go-now { width: 100%; }
button.go-now a { color: #ccc; text-decoration: none; }
button.go-now a:hover { color: #fff; }

<p style="text-align: center;">
    <button class="go-now">
        <a href="#" title="Go" target="_blank">Go Now</a>
   </button>
</p>

Answer 1

Попробуйте это:

        button {
        background: #4e368f;
        color: #ccc;
        padding: 10px 30px;
        margin-top: 0;
        border: 0;;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }
    button:hover { background: #5e4999; }
    button.go-now { width: 100%; }
    button.go-now a { color: #ccc; text-decoration: none; }
    button.go-now a:hover { color: #fff; }
    button:hover .test{
	color: #fff;
    }

    <p style="text-align: center;"><button class="go-now"><a href="#" title="Go to Armis Console" class="test" target="_blank">Go Now</a></button></p>

Answer 2

Вы близки, вам просто нужно изменить цвет текста, когда ваша кнопка наведена. Прямо сейчас у вас есть метка привязки, изменяющая белый цвет, когда она находится над ним.

button:hover .go-now a { color: #fff; }