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


    #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
        Founder/Coder
        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
        QueenLila
        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


        #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
                Founder/Coder
                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
                Founder/Coder
                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.
                https://vbmods.rocks/forum/vbulletin...t-guest-notice
                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:	14
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

                      Latest Topics

                      Collapse

                      Working...
                      X