Button Effect

[jack16]

I came across a help site containing buttons that pop forward when you hover over them. Is it an effect that can be achieved through the stylesheet? If so, may I ask what properties are involved? I've searched the forum but haven't had any luck. Perhaps I'm using the wrong search terms. Thanks.

[SteveS]

I'm guessing the site has a mouse over script that changes the button image to create the impression of movement. Used to be a feature in DreamWeaver...

Try this

[Psider]

You could probably get mostly what you want using CSS, but you might have to do it in a text editor. I'm not sure exactly what's available in the Flare editor.


e.g.
https://resource-centre.net/css3-tutori ... o-buttons/

[SteveS]

You could probably get mostly what you want using CSS, but you might have to do it in a text editor. I'm not sure exactly what's available in the Flare editor.


e.g.
https://resource-centre.net/css3-tutori ... o-buttons/

Neat, although you can get a better effect with the images hack...

If you follow the page the screenshot of the code for animating the buttons is wrong, its a repeat of the preceding code. Downloading the zip file will give you the code you need for the style sheet.

[NorthEast]

It's fairly easy using CSS transitions.
https://www.w3schools.com/css/css3_transitions.asp

This simple example should give you an idea how it works - this transition works on the font size, but you could animate the position or pretty much any other attribute:

Code: Select all

a.button-trans
{
	font-size: 1em;
	transition: font-size 0.5s;
	border: 1px solid #000000;
	padding: 0.5em;
}

a.button-trans:hover
{
	font-size: 1.5em;
}

[ajturnersurrey]

Is this the sort of thing you mean?

button_pop_out.png

If so - I achieved this using the MadCap Balboa template for html5 help

[NorthEast]

If so - I achieved this using the MadCap Balboa template for html5 help

That's a CSS box shadow - it'd be pretty easy to set that on the :hover style.
https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

[jack16]

Yes, the example from the Balboa template is the kind of effect I'm looking for. We're using a different template, but following the responses here, I'll try to work up the same effect in ours. You've all been very helpful. Thank you.

[jack16]

By the way, the directions in Dave's suggested link work nicely; they deliver the effect I'm after once the button has been rolled over. But is there a way in the stylesheet to create the animated effect of the button popping out as it's rolled over? I've tried applying the style to the hover class, and it comes close to the effect I'm after, but I'm missing something embarrassingly obvious, no doubt.

[NorthEast]

By the way, the directions in Dave's suggested link work nicely; they deliver the effect I'm after once the button has been rolled over. But is there a way in the stylesheet to create the animated effect of the button popping out as it's rolled over? I've tried applying the style to the hover class, and it comes close to the effect I'm after, but I'm missing something embarrassingly obvious, no doubt.

The properties you want to animate need to be in the transition, e.g. if you wanted to animate a box shadow:

Code: Select all

a.button-trans
{
	border: 1px solid #000000;
	transition: box-shadow 0.5s;
	padding: 0.5em;
}

a.button-trans:hover
{
	box-shadow: 5px 5px 5px #888888; 
} 

[jack16]

You're a star, Dave. Thank you. Thanks to all you good people.