I tried the following.
Create a rectangle.
Give it the required colour.
Clone it.
Make the clone 99% transaprent.
Put your button text on top.
Group text and transparent rectangle.
Give the group the name htmlclass=button_sliding_bg
Soft-group with the background rectangle.
Add the relevant part of the css from the linked example to the page header code
Code:
<style>
.button_sliding_bg {
box-shadow: inset 0 0 0 0 #C14800;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 0 100px 0 0 #C14800;
}
</style>
Adapt the 100px if your button has a different height.
Would have uploaded the example if attachments were working.
Bookmarks