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
    glennrocksvb
    Founder/Coder

  • glennrocksvb
    replied
    It's a little complicated pure CSS icon that's hard to implement for non-developers. An alternative is if you are using Font Awesome icons, then you can easily add a Font Awesome user icon. Or you can also add a real user image.

    Leave a comment:

  • Derwin
    Junior Member

  • Derwin
    replied
    Originally posted by glennrocksvb View Post
    Which icon?
    the little guy with the + next to him in the register button. Just like what you have on this website.

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    commented on 's reply
    Which icon?
  • Derwin
    Junior Member

  • Derwin
    replied
    Originally posted by glennrocksvb View Post
    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.
    Yes. That helps. Looks great. Thanks! In your OP for that note mod you show the sticky not with a button that has a little icon in it. How do I add that icon?

    Everything looks great now. I appreciate your help. Still buying more mods and hope you come out with more to make our forums better.

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    replied
    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.

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    replied
    I'll look into it later. No access to my computer at the moment.

    Leave a comment:

  • Derwin
    Junior Member

  • Derwin
    replied
    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:	19
Size:	19.7 KB
ID:	25000

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    replied
    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

    Leave a comment:

  • Derwin
    Junior Member

  • Derwin
    replied
    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.

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    commented on 's reply
    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"
  • mofeu
    Junior Member

  • mofeu
    replied
    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

    Leave a comment:

  • glennrocksvb
    Founder/Coder

  • glennrocksvb
    commented on 's reply
    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.
  • mofeu
    Junior Member

  • mofeu
    replied
    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)

    Leave a comment:


  • asd937
    replied
    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 ?

    Leave a comment:

  • faustvasea
    Senior Member

  • faustvasea
    replied
    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

    Leave a comment:

Latest Topics

Collapse

Working...
X