emotional buttons )))

[tililim]

hi all.
Are there any options to create button in Xara with effect when mouse is over the button it is no just changed to another button (as in mouse over layer) but change gradually in motion.
This is an example I would like to achieve (colored circles on the left and menu buttons at the top):
http://andreyrudenko.com/
thanks a lot

[Acorn]

Not directly. The effect is a CSS3 one. At present not all animation effects work on all browsers.

Try these effects, http://daneden.github.io/animate.css/, in all your browsers to see what works.

Getting them into a Xara design is a bit more problematic but not impossible.

Acorn

[tililim]

Sounds great.
Maybe someone can help with this? In case this is XARA forum ))) and try to fit this mentioned CSS code in XARA. I am sure that would be useful for everybody to have such an amazing effects in web-site.
Thanks in advance.

[Acorn]

There is a quid pro quo that I suggested yesterday. You research what is possible in all available browsers, report back and specific what you think you want or works and then some TGer might take up the challenge.
If someone creates a piece of code then others complain it doesn't work on their site/browser then no one benefits.

Acorn

[Acorn]

Perhaps someone is willing to develop this: CSS3 - Wiggle (Chrome only!).xar.

It is a demonstrator of a wiggle effect.
It works for Chrome and I just got it working for Firefox, but not yet for IE.

In this case, can everyone check and critique the approach?

I am hoping the responses prove why I making a stand on this.

Acorn

[Egg Bramhill]

Works in Opera too Acorn. As you say, not in IE.

Attached a different design that doesn't shake the surrounding text like your extrustion does.

[Acorn]

Thanks Egg. I presented the wiggle on an odd shape on purpose to show there will always be side effects.

Looks like I should be creating an Acorn Signal (same as Gotham City's Mayor uses for Batman).
A nice touch.

Here is a production-ready version that should work across all browsers younger than 3 years-old: CSS3 - Wiggle.xar

To use:

1. Copy the Placeholder Css3 - Wiggle onto your page/site.
2. For each wiggling object, give it a class Name - htmlclass=shake.

Acorn