кнопки Стайлинг HTML в Wordpress

Question

В моем HTML я следующие:

<a href="http://kb.domain.com/" class="button1">Knowledge Base</a> 
<br /> 

В моем CSS У меня есть следующие классы:

.button1 { 
    display: block; 
    height: 25px; 
    width: 130px; 
    background: #ffffff; 
    border: 2px solid #000000; 
    Color: #000000; 
    text-align: center; 
    margin-left: auto; 
    margin-right:auto; 
    padding-top:10px; 
    font-weight: 700; 
} 

Цвет ссылка синего цвета, я хочу сделать ссылка черный с белым фоном. Я хочу изменить это при наведении, сделав черный фон, а цвет ссылки белым. Я не могу это сделать, используя следующий класс CSS:

.button1 a:hover { 
    background: #393939; 
    Color: #ffffff; 
} 

Должен ли я изменить свой HTML, чтобы быть:

<button class="button1" id="save">Sample button</button> 

Пожалуйста совет. Я ценю вашу поддержку

Answer 1

должно быть

a.button1:hover { 
    background: #393939; 
    color: #ffffff; 
} 

.button1 уже ваша ссылка. Что ты это сказать, чтобы искать ссылки внутри .button1

EDIT: также имя для атрибутов в нижнем регистре

Answer 2

Это что-то вроде этого http://codepen.io/anon/pen/vNMLar?

a.button1:hover { 
    background: #000; 
    Color: #fff; 
    transition: all 0.2s ease-in-out; 
}