Button Effect

This forum is for all Flare issues not related to any of the other categories.

Button Effect

Postby jack16 on Thu Nov 08, 2018 9:12 am

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.
jack16
Propeller Head
 
Posts: 27
Joined: Fri Mar 10, 2017 7:42 am

Re: Button Effect

Postby SteveS on Thu Nov 08, 2018 2:32 pm

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
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
SteveS
Propellus Maximus
 
Posts: 1926
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).

Re: Button Effect

Postby Psider on Thu Nov 08, 2018 4:50 pm

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/
Psider
Sr. Propeller Head
 
Posts: 466
Joined: Wed Jul 06, 2011 1:32 am

Re: Button Effect

Postby SteveS on Thu Nov 08, 2018 5:10 pm

Psider wrote: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.
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
SteveS
Propellus Maximus
 
Posts: 1926
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).

Re: Button Effect

Postby Dave Lee on Fri Nov 09, 2018 12:52 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5368
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Button Effect

Postby ajturnersurrey on Fri Nov 09, 2018 3:32 am

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
You do not have the required permissions to view the files attached to this post.
ajturnersurrey
Sr. Propeller Head
 
Posts: 290
Joined: Fri Nov 05, 2010 3:30 am

Re: Button Effect

Postby Dave Lee on Fri Nov 09, 2018 4:53 am

ajturnersurrey wrote: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
Dave Lee
Master Propellus Maximus
 
Posts: 5368
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Button Effect

Postby jack16 on Fri Nov 09, 2018 5:27 am

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
Propeller Head
 
Posts: 27
Joined: Fri Mar 10, 2017 7:42 am

Re: Button Effect

Postby jack16 on Fri Nov 09, 2018 5:54 am

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.
jack16
Propeller Head
 
Posts: 27
Joined: Fri Mar 10, 2017 7:42 am

Re: Button Effect

Postby Dave Lee on Fri Nov 09, 2018 6:22 am

jack16 wrote: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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5368
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Button Effect

Postby jack16 on Fri Nov 09, 2018 7:47 am

You're a star, Dave. Thank you. Thanks to all you good people.
jack16
Propeller Head
 
Posts: 27
Joined: Fri Mar 10, 2017 7:42 am


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 9 guests