Announcement

Collapse
No announcement yet.

How to Create a Pulsating Button using CSS Animation

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    [Official - Free] How to Create a Pulsating Button using CSS Animation

    Want buttons that grab attention like what this forum has for the Register Now button for guests?

    Instructions:
    1. Add these CSS in css_additional template in AdminCP or via Sitebuilder > Style CSS Editor.
    Code:
    You need to be logged in to view the code. Login or Register now!
    2. Add hearbeat CSS class to any button or HTML tag you want to use in HTML/Ad/PHP modules, Announcemens, Notices, etc. You can add the heartbeat CSS class to any element you want to pulsate not just to buttons.

    3. If you are using this for buttons, you also need to add b-button and b-button--primary or b-button--special CSS classes to the button.


    Demo:

    Last edited by glennrocksvb; 04-12-2017, 09:09 AM. Reason: Updated instructions

    #2
    This is a really clever little hack. Thanks a bunch! Looks nice on the online indicator icon.

    Comment


      #3
      Good nice work

      Comment


        #4
        This is crazy (in a good way). I added this to a flash flip clock on the main forum page and it's beating right along with the seconds changing. I probably won't leave it up long cause it looks .... crazy. I put a screen capture video if you want to see it.

        Comment


          #5
          glennrocksvb So I added the CSS and then created a HTML module but it doesn't come out right.

          This is was i put in the HTML block
          Code:
          You need to be logged in to view the code. Login or Register now!

          Comment


            #6
            You don't use it as an HTML tag but use it in a class attribute in an HTML tag.

            Comment


              #7
              You need to be logged in to view the quote. Login or Register now!
              I see, i got it to work. I also put a copyright down at the bottom to point people here if their interested.
              The easiest way to get free 10GB storage! Direct access to your cloud storage, with any program, without consuming any local disk space. Play music, view photos, edit documents and others directly from the cloud like you would from a local drive - from anywhere in the world.

              Comment


                #8
                I seem to have forgotten how to implement this. I added the above code to my css. And I want to add the pulsating button to my notices.

                This is what I included in my notice:

                <center><a href="https://www.christforums.org/register/" class="heartbeat">Register Now!</a></center>

                Why is this not working?

                William
                Christian Forums
                Yamaha Vmax Motorcycles

                Comment


                  #9
                  Did you add the css in the first post to your css_additional template?

                  Comment


                    #10
                    You need to be logged in to view the quote. Login or Register now!
                    Yes. I put the code at the very top at line 1.

                    William
                    Christian Forums
                    Yamaha Vmax Motorcycles

                    Comment


                      #11
                      Add the "b-button" class to the button. If you want it to look like the primary button, also add "b-button--primary". There is also "b-button--special" class if you want. These are default vB5 classes to style the buttons.

                      HTML Code:
                      You need to be logged in to view the code. Login or Register now!
                      I will add this instruction to the first post.

                      Comment


                        #12
                        Perfect, Glenn!

                        Thanks,
                        William
                        Christian Forums
                        Yamaha Vmax Motorcycles

                        Comment


                        • glennrocksvb
                          glennrocksvb commented
                          Editing a comment
                          You're welcome. Thanks for the coffee!

                        #13
                        If I want to make my "Join Now" button pulse [which is not a stock img], how do i link it in the html tag?
                        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                        Comment


                          #14
                          Just add class="heartbeat" to the <a> tag for Join Now button after you added the CSS to css_additional template.

                          Comment


                            #15
                            Thanks, Glenn!
                            If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                            Comment

                            Working...
                            X