Animated CSS - buttons - text - images

[CharlesParker]

Re: Animated CSS - buttons - text - images

Glad to hear it! I agree with you on the animations, the ones from animate were so easy to add and use. Honestly they should ship with AA or at least something similar, might be pretty cool if they had a whole library (even small) similar to the other animations to show panel cards where you can simply select them and set some properties such as speed, duration, etc.
Regardless, it's still pretty easy to implement outside additions!

[bob9145]

Re: Animated CSS - buttons - text - images

Learned much from this post. You can style buttons in a list control by adding the desired class to the field button property. Was able to add animation that gives the user clear indication that the button has been touched/clicked. This was vague in the IOS7 style especially on a mobile device. We are all users and we have all been trapped in an app. Responsive CSS is the light at the end of the tunnel.
Thanks!
Bob

[iRadiate]

Re: Animated CSS - buttons - text - images

Seems some of the links on this post have expired. Added hover.css to my project and then to the css linked files property in a ux. However the css of the added file doesn't show up in the picker with the master style that is being used in the component? So how do you add them?. Do you just name them? I followed Charles' initial instructions but lost it when trying to add the css to the button class. Button class hover +hvr-pulse:hover ?

Added hover.css code to my master style IOS7 this enabled me to add the style to the button class hover hvr-pulse-grow. This worked in a test ux in live preview but not in a more complex
ux published to my project.

Works for me ...

1.jpg 1a.jpg 3.jpg


https://www.screencast.com/t/6V2h3QrBrrkH

[bob9145]

Re: Animated CSS - buttons - text - images

Seems some of the links on this post have expired. Added hover.css to my project and then to the css linked files property in a ux. However the css of the added file doesn't show up in the picker with the master style that is being used in the component? So how do you add them?. Do you just name them? I followed Charles' initial instructions but lost it when trying to add the css to the button class. Button class hover +hvr-pulse:hover ?

//Added hover.css code to my master style IOS7 this enabled me to add the style to the button class hover hvr-pulse-grow. This worked in a test ux in live preview but not in a more complex
ux published to my project.

Retract that: Adding it to the style.css of IOS7 works. Cool!

[CharlesParker]

Re: Animated CSS - buttons - text - images

are you using the animate.css? be sure to add it as an additional class with the plus sign

[bob9145]

Re: Animated CSS - buttons - text - images

Having an issue with a button in a list control. Using the canned IOs7 Alpha style. Getting no hover and no change when touched/clicked. Can you add animation to a button in a list control? I also want to disable the button after it is touched/clicked. Looked through the component methods but they apply to a control, or a button list. Can you disable a button in the onclick event in a list control? This might also serve as the animation. There is a delay on the onclick event that involves a crud operation. This delay makes it seem like the button is not working. It is a much more interactive experience if the button responds to a touch/click. Any suggestions?

[iRadiate]

Re: Animated CSS - buttons - text - images

I've been having fun playing around with these, here are a few more examples applied to button controls:

http://screencast.com/t/E8gy03LLsaqS

[gregincolumbus]

Re: Animated CSS - buttons - text - images

Thanks Stephen!

[peteconway]

Re: Animated CSS - buttons - text - images

Cheers

[iRadiate]

Re: Animated CSS - buttons - text - images

This is a pretty cool set of button animations. Here's an example of Reveal on my UX buttons:

http://screencast.com/t/QDeNblJ9n

In case anyone is interested, I've attached the hover.css stylesheet with the html and default styles removed. You can just add the css to your project and use it as is.

[iRadiate]

Re: Animated CSS - buttons - text - images

I downloaded the a5w page with all the CSS on it, that's awfully nice to have it all there to just copy into any style I want to. Thanks for the donation to the Alpha forum users!

What is the link for the a5w page Charles, I can't seem to find it?

Oh, never mind, I've got it.

[CharlesParker]

Re: Animated CSS - buttons - text - images

I downloaded the a5w page with all the CSS on it, that's awfully nice to have it all there to just copy into any style I want to. Thanks for the donation to the Alpha forum users!

[CharlesParker]

Re: Animated CSS - buttons - text - images

Nice work on that - heres a direct link to the demo of the effects there!
http://alphasnip.com/preview/45875/button-animated/

Definitely a bunch of NIFTY stuff!

[Khanafi]

Re: Animated CSS - buttons - text - images

got something for button animation here http://alphasnip.com/Button-animated...y-Ian-Lunn.a5w

khanafi,
alphasnip.com

[GGandhi]

Re: Animated CSS - buttons - text - images

take a look at videos M35 in version 11, it should show some step by step method. you will call the class from that css file. but it will change other buttons too with similar class to start with.
if you just need one button to change then you must have an id for that button and with javascript set the css to that button.