CSS для поля "ссылка"

Всем доброго дня!
Уже второй день бьюсь над, казалось бы, простой задачей.

Идея в том, чтобы вместо ссылки, была кнопка вот такого образца:
<style>
a.button7 {
font-weight: 700;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 3px;
background: rgb(64,199,129);
box-shadow: 0 -3px rgb(53,167,110) inset;
transition: 0.2s;
}
a.button7:hover { background: rgb(53, 167, 110); }
a.button7:active {
background: rgb(33,147,90);
box-shadow: 0 3px rgb(33,147,90) inset;
}
</style>

<a href="#" class="button7">кнопка</a>

shpargalkablog.ru/2012/04/css-knopki.html#on (второй пример сверху)

Что я делал: создал поле "ссылка", залез в файл css -> добавил класс (код). Проверил, ничего не работает… Но при этом если для поля вставить какой-либо класс, который уже есть в теме, то он применится.

Нашел здесь подобную тему… но все равно не догоняю, как правильно сделать.

Собственно говоря, я это и добавил в css (без html), и указал класс css для ссылки через админку. Результат нулевой. Прошу помощи!

Может попробовать поменять местами
a.button7 на .button7 a { }
а.button7:hover на .button7 a:hover {}
и т.д или

указал класс css для ссылки через админку.

Указать а.button7 если вы указывали просто button7

Специально под тюнинг кнопочек у разработчиков системы целый премиум-компонент имеется.

Всем спасибо! Вопрос решился… стыдно признаться… очисткой кеша. Но с таким в первый раз столкнулся, раньше ctrl+F5 всегда помогал. Пока полную очистку в браузере не сделал, так и не работало.

Спасибо всем, кто уделили мне свое время!