html文本从右到左,使用css更改按钮内容:文本从右向左

我想要一个按钮,如果有人悬停在上面,它会改变内容。我已经讲过了。但是,我不知道怎样才能得到我想要的结果。我想把它动画化。当有人越过按钮时,新的文本应该从右向左飞入,并将当前文本推出。另外,我想在右边有一个小的sisser图标(在按钮里面),当鼠标悬停在sisser图标上时,它也会改变背景颜色。

这有可能吗?如果有,怎么办?在stackoverflow或codepen上我还没有找到一个接近我想要的解决方案。这就是我目前所拥有的:

.product-voucherButton span {

display: none;

}

.product-voucherButton:hover span {

display: block;

}

.product-voucherButton:before {

content: 'Voucher';

}

.product-voucherButton:hover:before {

content: '';

}

.btn-secondary {

background-color: #312C2B !important;

color: white !important;

border: none !important;

}

.btn {

width: 150px;

display: inline-block;

font-weight: 400;

color: #212529;

text-align: center;

vertical-align: middle;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

background-color: transparent;

border: 1px solid transparent;

padding: .375rem .75rem;

font-size: .9rem;

line-height: 1.6;

border-radius: .25rem;

-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

this is my code