Кнопка с подменой текста на другой при наведении - Joomla 3.x: Общие вопросы

Здравствуйте форумчане))

Нужно сделать кнопку чтобы текст на ней менялся при наведении, можно и фон затронуть, но самая суть вопроса в тексте на кнопке.
Кнопка должна будет работать только в таком режиме, более от нее не требуется.
Например: на кнопке надпись "позвонить" меняется на "x xxx xxx xx xx"
Желательно чтобы это был текст, и пользователь сразу мог позвонить если зашел на страницу с мобильного.
Может кто подскажет решение?

PS Кнопки тоже не доводилось делать, не помешало бы решения для реализации всего в целом 
PPS Нашел вариант с подменой картинки одна на другую при наведении, но не то..

Если честно то даже не смешно, это основы HTML и CSS которые никак не относятся к Joomla!

Я этого не знал, Спасибо 

Для мобильных конечно хороший вариант, но для ПК не очень: возможность нажать на ссылку остается, и при нажатии появляется окно "с помощью чего хотите открыть ссылку".
Нет ли другого варианта, чтобы оформлено было не как ссылка? Просто текст с заменой при наведении и возврат в предыдущее положение при уходе курсора.

Может быть ссылку закрыть? Видел, что можно с помощью "#", но как это сделать, не пойму.. 
Если здесь это применимо.
Или реализовать без <a href=..

Код

 <a href="tel:xxxxxxxx" class="link-phone"></a>
 <style>
.link-phone:after{content: 'Позвонить'}
.link-phone:hover:after{content: 'xxxxxxxx'; };
</style>

Ну поставьте вместо a блок div ... делов-то ))

не надо ничего заменять.
все правильно работает. если для широкоформатов не нужна ссылка, то отменяете её через CSS правило

pointer-events: none;

прописанное в @ media условие.
идем читать в Google.