New call-to-action
Results 1 to 20 of 20

Thread: Animated CSS - buttons - text - images

  1. #1
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default Animated CSS - buttons - text - images

    Screwing around this morning with my limited skill set and found an animated.css file on github so I thought I would give it a try.
    I cannot express to you how absolutely SIMPLE Alpha software has made it to not only "drop this in" but to call and use it is about as simple as it can get!

    Here is the page for you to observe a demo:
    https://daneden.github.io/animate.css/

    Now if you want to add this in all you have to do is download the CSS file then go into your web project and "Add File"
    Ok so now the CSS file is "available" for you to use locally.
    Next open up a UX and go to the properties page, find "CSS Linked Files" and put "animate.css" there - then go to any button and in the properties of that button put one of the class names like maybe for HOVER "animate pulse" or animate wobble and hit live preview.

    Your DONE, now your buttons can have modern animations LITERALLY without any hard coding on your part. So simple it's ice cream time.

    If you find anything interesting - post back!
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

  2. #2
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,706

    Default Re: Animated CSS - buttons - text - images

    Great find. - Thanks
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  3. #3
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON, Canada
    Posts
    1,740

    Default Re: Animated CSS - buttons - text - images

    That is really cool Charles.

    Just one small note, when you add the class it's animated pulse or animated wobble rather than animate pulse or animate wobble, etc.

    I noticed the author also has a pretty useful video here ... https://www.youtube.com/watch?v=CBQGl6zokMs

    Thanks for sharing. Ice cream time
    Last edited by iRadiate; 08-08-2016 at 10:12 AM. Reason: typo

  4. #4
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,706

    Default Re: Animated CSS - buttons - text - images

    Excellent.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  5. #5
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default Re: Animated CSS - buttons - text - images

    Since I am NOT an expert on integrating CSS into Alpha - I always look for the short cut - the easiest thing to do! With that in mind, what would be the easiest way to add the "Animated Wobble" to the HOVER event for tabbedUI button and please be step by step specific - think NEW GUY!
    OR in a Grids button where the HOVER event must be set in the styles additional CSS?

    How would you do it? Should you add in the CSS from the animated style sheet to an existing style and in that way make all of your hover events the same, or would you just call the CSS from the buttons properties?

    How would you COMBINE an existing style sheet like animate with an Alpha one?

    Not a lot of advice/discussion about how you would do this, the easiest methods etc.

    I think that's why we see such an interest in stuff like Alpha Boot strap and the Style sheet builder - people are just not sure how to integrate even the simplest CSS let alone the often necessary javascript etc that would also need to be applied to get the nifty results.

    I think if we are going to develop "fun" and "interesting" business apps we should know how to do this. I just keep pounding away at it - I'll get it yet!
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

  6. #6
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default 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.
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  7. #7
    Member Khanafi's Avatar
    Real Name
    Mohammad Khanafi
    Join Date
    Jun 2016
    Location
    Indonesia
    Posts
    30

    Default Re: Animated CSS - buttons - text - images

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

    khanafi,
    alphasnip.com

  8. #8
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default 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!
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

  9. #9
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default 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!
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

  10. #10
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON, Canada
    Posts
    1,740

    Default Re: Animated CSS - buttons - text - images

    Quote Originally Posted by CharlesParker View Post
    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.

  11. #11
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON, Canada
    Posts
    1,740

    Default 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.
    Attached Files Attached Files
    Last edited by iRadiate; 08-16-2016 at 11:39 AM.

  12. #12
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,706

    Default Re: Animated CSS - buttons - text - images

    Cheers
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  13. #13
    Member
    Real Name
    Greg Taylor
    Join Date
    Feb 2009
    Location
    Columbus, Ohio
    Posts
    453

    Default Re: Animated CSS - buttons - text - images

    Thanks Stephen!

  14. #14
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON, Canada
    Posts
    1,740

    Default 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

  15. #15
    Member bob9145's Avatar
    Real Name
    Bob Senski
    Join Date
    Jun 2009
    Posts
    822

    Default 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?

  16. #16
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default 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
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

  17. #17
    Member bob9145's Avatar
    Real Name
    Bob Senski
    Join Date
    Jun 2009
    Posts
    822

    Default 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!
    Last edited by bob9145; 02-19-2020 at 03:54 PM.

  18. #18
    "Certified" Alphaholic iRadiate's Avatar
    Real Name
    Stephen
    Join Date
    Jan 2011
    Location
    London, ON, Canada
    Posts
    1,740

    Default Re: Animated CSS - buttons - text - images

    Quote Originally Posted by bob9145 View Post
    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
    Alpha Anywhere v12.4.6.1.9 Build 6488-5436 IIS v10.0 on Windows Server 2019 Std in Hyper-V

  19. #19
    Member bob9145's Avatar
    Real Name
    Bob Senski
    Join Date
    Jun 2009
    Posts
    822

    Default 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

  20. #20
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    2,243

    Default 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!
    NWCOPRO: Nuisance Wildlife Control Software My Application: http://www.nwcopro.com "Without forgetting, we would have no memory at all...now what was I saying?"

Similar Threads

  1. Adding Images to Xdialog Buttons
    By jbk in forum Alpha Five Version 10 - Desktop Applications
    Replies: 2
    Last Post: 03-15-2012, 01:19 PM
  2. Tabbed UI Buttons - Custom Images and Text
    By qcorporation in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 10-21-2010, 12:59 AM
  3. Images in radio buttons
    By Pat Bremkamp in forum Application Server Version 10 - Web/Browser Applications
    Replies: 1
    Last Post: 11-01-2009, 10:32 AM
  4. Animated GIFs & Combined Images
    By Dezza in forum Application Server Version 8
    Replies: 6
    Last Post: 06-09-2007, 09:04 AM
  5. Buttons and Animated gif files
    By Andre Vorster in forum Alpha Five Version 6
    Replies: 2
    Last Post: 09-11-2004, 05:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •