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

    Free Mod 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:
    .heartbeat {
        -webkit-animation: pulse 1s ease infinite;
        -moz-animation: pulse 1s ease infinite;
        -ms-animation: pulse 1s ease infinite;
        -o-animation: pulse 1s ease infinite;
        animation: pulse 1s ease infinite;
        display: inline-block;
    }
    
    @-webkit-keyframes pulse {
        0% {
            -webkit-transform: scale(1);
        }
    
        25% {
            -webkit-transform: scale(1.1);
        }
    
        50% {
            -webkit-transform: scale(1);
        }
    
        100% {
            -webkit-transform: scale(1);
        }
    }
    
    @-moz-keyframes pulse {
        0% {
            -moz-transform: scale(1);
        }
    
        25% {
            -moz-transform: scale(1.1);
        }
    
        50% {
            -moz-transform: scale(1);
        }
    
        100% {
            -moz-transform: scale(1);
        }
    }
    
    @-ms-keyframes pulse {
        0% {
            -ms-transform: scale(1);
        }
    
        25% {
            -ms-transform: scale(1.1);
        }
    
        50% {
            -ms-transform: scale(1);
        }
    
        100% {
            -ms-transform: scale(1);
        }
    }
    
    @-o-keyframes pulse {
        0% {
            -o-transform: scale(1);
        }
    
        25% {
            -o-transform: scale(1.1);
        }
    
        50% {
            -o-transform: scale(1);
        }
    
        100% {
            -o-transform: scale(1);
        }
    }
    
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
    
        50% {
            transform: scale(1.1);
        }
    
        100% {
            transform: scale(1);
        }
    }
    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
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #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:
          <center><heartbeat><a href="{register_page}"target="_blank">Register now!</a></heartbeat></center>

          Comment


            #6
            You don't use it as an HTML tag but use it in a class attribute in an HTML tag.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              Originally posted by glennrocksvb View Post
              You don't use it as an HTML tag but use it in a class attribute in an HTML tag.
              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

                Comment


                  #9
                  Did you add the css in the first post to your css_additional template?
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #10
                    Originally posted by glennrocksvb View Post
                    Did you add the css in the first post to your css_additional template?
                    Yes. I put the code at the very top at line 1.

                    William

                    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:
                      <a href="https://www.christforums.org/register/" class="b-button b-button--primary heartbeat">Register Now!</a>
                      I will add this instruction to the first post.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #12
                        Perfect, Glenn!

                        Thanks,
                        William

                        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?

                        Comment


                          #14
                          Just add class="heartbeat" to the <a> tag for Join Now button after you added the CSS to css_additional template.
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment


                            #15
                            Thanks, Glenn!

                            Comment

                            Users Viewing This Page

                            Collapse

                            There is 1 user viewing this forum topic.

                            • Guest Guest

                            Latest Posts

                            Collapse

                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"