Добавлен пользовательский класс в пункт меню на WordPress, но не работает ли?

Question

Я недавно создал пункт меню в моем WordPress-меню, стилизованный по-другому, так что он выглядит как кнопка призыва к действию в сочетании с элементом навигации.

Я пошел в меню> затем классы CSS (на предмет) и добавил callout-button

Затем я добавил следующее в мои темы, настраиваемый CSS,

.callout-button a {
  background-color: #8E3D86;
  color: #fff !important;
  border-radius: 8px;
}

.callout-button a:hover {
  background-color: #b8b8b8 !important;
  border: 1px solid #8E3D86;
  -webkit-transition: all 400ms;
  transition: width all 400ms;
}

.callout-button a:after {
  display: none !important;
}

Теперь это правильно использует стиль кнопки, однако :hover не работает должным образом, цвет фона не меняется, а также добавляется дополнительная рамка (которая является частью моего обычного меню css)

Кто-нибудь имеет какие-либо идеи о том, как я могу сделать это переопределить обычное меню CSS?