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

    #31
    Both css editor and site builder. I'm not using cloud.

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Can you save even without the code here? I suspect this is an existing issue.

    #32
    You are right. I tried saving without doing anything and I get the same error? Is there a fix?

    Comment


      #33
      Originally posted by glennrocksvb View Post
      Demo:

      My ♥ beats like this
      Is there anyway to add announcement icon in replacement of the love icon character ♥

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Are you using the pulsating effect in a button? If yes, then use <button class="heartbeat b-button"><img src="announcement.png" alt="" /></button>

      #34
      i am lost down't know where to go after i colled it in css_additional

      Comment


        #35
        chocodz, follow Steps 2 and 3. What do you want to have this pulsating effect?
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


        • chocodz
          chocodz commented
          Editing a comment
          dont know where to go exact

        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          The first question is where do you want to use this pulsating effect?

        • chocodz
          chocodz commented
          Editing a comment
          like post reply and new topic and subscribe

        #36
        Originally posted by chocodz View Post
        like post reply and new topic and subscribe
        You can only use it as is in the HTML content you'll create such as in Announcements, HTML modules, PHP module and Ad modules and in the post (if you have HTML permission) by adding class="heartbeat" to <button> or any HTML tag you are adding. To use the same effect in existing buttons will require a additional code.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #37
          Originally posted by Mackey View Post
          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.

          I like clock, how did you added ? Thanks

          Comment


            #38
            Originally posted by glennrocksvb View Post
            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.
            where to do this in admin cp ?

            Comment


              #39
              Originally posted by glennrocksvb View Post
              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.
              I am fine with step1 ... I add the code in css_additional code

              but how I can do the step 2 ... I want to add the "heartbeat" of be member of my forum (for the guests)

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Where exactly do you want to add the heartbeat? In the user avatar? Please be more specific. But note that you can only add it to Notices, HTML Modules, posts where you have HTML permission, Phrases or anywhere you can add HTML. For existing default buttons and other existing sections of the site, it will require additional code.

              #40
              Originally posted by glennrocksvb View Post
              Where exactly do you want to add the heartbeat? In the user avatar? Please be more specific. But note that you can only add it to Notices, HTML Modules, posts where you have HTML permission, Phrases or anywhere you can add HTML. For existing default buttons and other existing sections of the site, it will require additional code.
              to the new registers users

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                To the "register" link? Simply add class="heartbeat" inside the <a> tag. Or if it already has a class attribute, then just add "heartbeat" to it separating it with comma like class="existingclasshere heartbeat"

              #41
              Hello. I want to create a REGISTER BLOCK like you have for this site. How exactly do I do that? I obviously also want to add this pulsating button.

              Comment


                #42
                Originally posted by Derwin View Post
                Hello. I want to create a REGISTER BLOCK like you have for this site. How exactly do I do that? I obviously also want to add this pulsating button.
                Making the default guest notice to stick at the bottom of the page as you scroll helps it to become more noticeable. This may encourage guests more to sign up or log in to your forum. To do this, simply add the below custom CSS in css_additional template in AdminCP or in Sitebuilder &gt; Style &gt; CSS Editor. .l-desktop
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #43
                  I added the code but it still does not show up like your box.

                  .l-desktop .notice[data-notice-id='1'] {
                  position: fixed;
                  z-index: 2;
                  bottom: 0;
                  right: 0;
                  margin: 10px;
                  width: 400px;
                  box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.7);
                  }
                  .page3 .notice[data-notice-id='1'] {
                  display:none !important;
                  }


                  Click image for larger version

Name:	box.png
Views:	69
Size:	19.7 KB
ID:	25000

                  Comment


                    #44
                    I'll look into it later. No access to my computer at the moment.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #45
                      I updated the CSS code in the first post of that other mod to add a notice header title if that's what you were looking for.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

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