Modern non-button buttons

[aap]

Hi
I have seen a new trend in web design, whereby a button is merely formatted text, with an arrow that moves on hover event.

Example:
this part
on this page

or also this part
on this other one

I suspect the new button element can do it… since it’s so flexible. Can you please give detailed instructions, specially for the first example.

THANK YOU

[friech]

Hi @flashfog,

Thank you for writing in, yeah sure the (new) Button element can do that. First, remove all the default cosmetics on the button. That is the Background and Shadow color, set that all to transparent.

Then enable the Graphic Setup of your Button

And then choose your icon in the Graphic Icon setup.

Hope it helps,
Cheers!

[aap]

I got it pretty close. The only thing missing is the icon translating to the right, on the hover event.I see scale and flip options but no movement. Any way to accomplish this?

[friech]

Hi @flashfog,

Regretfully, there is no native option for that, but you can achieve that by adding the custom CSS below to your button’s Element CSS area.

$el.x-anchor .x-graphic {
  transition: margin 0.5s ease;
}
$el.x-anchor:hover .x-graphic {
	margin-left: 10px;
}

Play with the margin-left: 10px; to adjust the movement of the icon.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial
CSS transition property
CSS :hover Selector

Hope it helps,
Cheers!