изменить тег span при наведении на кнопку

У меня есть тег span внутри кнопки. Я просто хочу, чтобы текст диапазона изменялся при наведении от белого до темного, когда я нажимаю кнопку. Единственный способ, с которым он сейчас работает, - это установить курсор на сам тег span, а затем указатель мыши должен быть точно в тексте внутри кнопки. Если не вся кнопка белого цвета при наведении курсора.

a.sf-button.transparent-dark span {

}

a.sf-button.transparent-dark span:hover {

}

a.sf-button.transparent-dark {
    color: #FFF;!important;
    background-color: #12225b;
}

a.sf-button.transparent-dark:hover {
    color: #666;!important;
    background-color: #FFF;
    border: 1px solid #222;
    border: 1px solid rgba(34,34,34,.2);
}

a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
    color: #666;
    background-color: #FFF;
    border: 1px solid #222;
    border: 1px solid rgba(34,34,34,.2);
}
'

Я не могу изменить способ настройки кнопки, потому что ее часть темы.

Вот HTML:

<a class="sf-button large transparent-dark stroke-to-fill " href="https://www.domain.com" target="_self"><span class="text">button text</span></a>

Я на самом деле пошел вперед и установил скрипку для этого. И это действительно работает на скрипке. Поэтому, возможно, это означает, что что-то мешает ему. Но я не могу определить, что будет.

http://jsfiddle.net/robmcmon/4ZWUX/