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

    #16
    This is very simple but effective. Thanks.
    HostXNow - UK Web Hosting

    Comment


      #17
      Nice little css. I'd like to have that little pin show up in the right corner of the notice. Any chance you could share how to do this?

      Comment


        #18
        Hello Everybody,

        I really like the Sticky Default Guest Notice, but I'm having problems with the pulsating Register Now text.
        I went to css_additional.css and installed this code...

        PHP Code:
          .l-desktop .notice[data-notice-id='1'] {     positionfixed;     z-index2;     bottom0;     right0;     margin10px;     width400px;     box-shadow0px 2px 8px 2px rgba(0,0,0,0.7); } 
        Everything worked fine, so then I went back & changed the code to this...

        PHP Code:
          <a href="http://www.mywebsite.com/register/" class="b-button b-button--primary heartbeat">Register Now!</a> .l-desktop .notice[data-notice-id='1'] {     positionfixed;     z-index2;     bottom0;     right0;     margin10px;     width400px;     box-shadow0px 2px 8px 2px rgba(0,0,0,0.7);    }   .heartbeat {     -webkit-animationpulse 1s ease infinite;     -moz-animationpulse 1s ease infinite;     -ms-animationpulse 1s ease infinite;     -o-animationpulse 1s ease infinite;     animationpulse 1s ease infinite;     displayinline-block; }  @-webkit-keyframes pulse {     0% {         -webkit-transformscale(1);     }      25% {         -webkit-transformscale(1.1);     }      50% {         -webkit-transformscale(1);     }      100% {         -webkit-transformscale(1);     } }  @-moz-keyframes pulse {     0% {         -moz-transformscale(1);     }      25% {         -moz-transformscale(1.1);     }      50% {         -moz-transformscale(1);     }      100% {         -moz-transformscale(1);     } }  @-ms-keyframes pulse {     0% {         -ms-transformscale(1);     }      25% {         -ms-transformscale(1.1);     }      50% {         -ms-transformscale(1);     }      100% {         -ms-transformscale(1);     } }  @-o-keyframes pulse {     0% {         -o-transformscale(1);     }      25% {         -o-transformscale(1.1);     }      50% {         -o-transformscale(1);     }      100% {         -o-transformscale(1);     } }  @keyframes pulse {     0% {         transformscale(1);     }      50% {         transformscale(1.1);     }      100% {         transformscale(1);     } 
        Nothing happened, The floating text message was there but no pulsating button. If someone could show me where I went wrong, I would be very happy. Maybe the order I put it in is wrong? I don't think I missed any code? Oh well,,,, HELP! Please go light on me as far as explaining things, I barely know the difference between HTML and a hot meal... Like my name says - I'm a RUBE!

        Thank You for Your Time!!!!! RUBE
        Last edited by RUBE; 11-22-2017, 11:05 AM. Reason: I'm having a problem with the format of my post, how can you make the code (container) windows taller?

        Comment


          #19
          You should not add HTML code in CSS! There's no instruction that says so. Put all the necessary CSS code in css_additional template in AdminCP or CSS Editor in Sitebuilder.

          ​​​Then put the HTML code for the Register button in the Notice itself. See post #11 to see what HTML code to use for the button.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #20
            Originally posted by RUBE View Post
            I'm having a problem with the format of my post, how can you make the code (container) windows taller?
            The line breaks in the source code were removed that's why the code container is not tall enough.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #21
              Hello Everybody,
              I got it working... Couldn't have done it with out you Glenn - Thanks a Million!!!!!
              I know I'm pushing my luck, but how hard will it be to change that pulsating button color to Red?

              Thank You for Your Time!!!!!
              RUBE

              Comment


                #22
                Code:
                <a href="http://www.mywebsite.com/register/" class="b-button heartbeat" style="background:red; color:white;">Register Now!</a>
                Last edited by glennrocksvb; 02-12-2022, 12:59 PM.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #23
                  Hello,

                  Everything is working GREAT...
                  Thank You Glenn for the Help!

                  Thanks a Million!!!!!
                  RUBE aka D.F.

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Glad to help!

                  #24
                  Hello Glenn I'm having trouble with the register now button. I implemented the code but its not showing up on the main page, is there something else that needs to be done?

                  Comment


                    #25
                    Did you follow all the 3 steps mentioned in the first post?
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #26
                      Im having trouble with the 2nd step

                      Comment


                        #27
                        Where do you want to use the pulsating button?
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #28
                          I would like it to be the exact same as yours in the bottom right corner

                          Comment


                            #29
                            Right click on the Register Now button on this site and then select Inspect to see how the hearbeat and b-button classes are added to the class attribute in the HTML tag.
                            Helpful? Donate. Thanks!
                            Buy me a coffeePayPal QR Code
                            Fast VPS Host for vBulletin:
                            A2 Hosting & IONOS

                            Comment


                              #30
                              Originally posted by glennrocksvb View Post
                              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:

                              <button href="https://www.paypal.me/noypiscripter/5" class="b-button b-button--special heartbeat" target="_blank">My &hearts; beats like this</button>
                              i followed the instructions and it returns "cant save CSS error". I have vb5. have anyone seen this before?

                              Comment


                              • glennrocksvb
                                glennrocksvb commented
                                Editing a comment
                                Is that error from CSS Editor in Sitebuilder? Are you on vBCloud?

                            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 "|||"