Zmiana tekstu w buttonie

Próbuję zmienić tekst w moim buttonie. Może na początku pokażę jak to wygląda:
https://jsfiddle.net/ghcs70fh/

Chciałbym, żeby tekst "dodaj do koszyka" wyświetlił się wewnątrz buttona po najechaniu na niego myszą. To znaczy, żeby cena zniknęła a pojawił się tekst o dodaniu do koszyka, I tu pojawia się problem, bo cena jest pobierana z bazy danych dlatego też nie mogę zrobić tego za pomocą :before, :after, bo musiałbym wtedy ręcznie wpisać wartość do atrybutu content. Ma ktoś jakiś pomysł jak to rozwiązać?

JS i atrybuty data-*

EDIT: swoją droga zastanawiam się jak sie ma takie rozwiązanie pd względem UX :P

W najgorszym wypadku... daj w środku buttona dwa spany - jeden z ceną, drugi z tekstem. Na hoverze cenę ukrywaj, pokazuj tekst, a bez hovery domyślnie ukrywaj tekst i pokazuj cenę.

axelbest napisał(a):

W najgorszym wypadku... daj w środku buttona dwa spany - jeden z ceną, drugi z tekstem. Na hoverze cenę ukrywaj, pokazuj tekst, a bez hovery domyślnie ukrywaj tekst i pokazuj cenę.

A w najlepszym wypadku?

W najlepszym wypadku będzie to użycie javascriptu tak jak pisał @Veox