Question about MouseOver (Effect)

Good morning guys,

I was wondering, if it is possible to achieve this effect with Xara Web Designer 365 (Premium)
It is called "Sweep to Bottom"
Screenshot

I reviewed all embedded animations, but it seems Xara don't have it, so it is possible to use it in some other way?

Thank you all in advance!

Hi Kamen, screenshot does not show anything.

Ciao

Roly

Hey Roly,
The screenshot shows which is the example to take a look from the URL
I didn't realised that its not easily visible in the thread post, sorry :(

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.

Slightly different way of doing it than sirans, which I tried. Both work fine.

Quote:

---

Would have uploaded the example if attachments were working.

---

Obviously fine at the moment siran. Are you still having issues?

Thanks Egg and Siran, what would we do if we did not have code guru's like the 2 of you as well as some others on TG.

Ciao

Roly

Thanks a lot for the suggestions guys!
I will try this, once I get home and I will let you know the results.

Thanks again!

Hi Egg, didn't try to attach something yet. No need to, your example is a lot easier to use. :)