How to Create a Pulsating Button using CSS Animation

[webmsg]

Thanks so much for the explanation

[glennrocksvb]

You're basically just creating a utility CSS classes when you do step 1. It's like a tool, if you don't use it, it's useless and of no value.

To use it, just add "heartbeat" class to any HTML tag. For example:

<button class="hearbeat b-button b-button--primary">Register</button>

You can use it wherever you can post HTML tags - Notices, HTML Module, Ad Module, BBCodes, Posts (if you have HTML permission), etc. and add it to whatever HTML tag you want to.

[webmsg]

sorry, no, I thought I only needed to add it after the notice CSS.

I really couldn't understand how to do that step!

thanks

[glennrocksvb]

As I said, that's just step 1. Did you do step 2?

[webmsg]

You just did step 1. Do step 2.

I already added the .heartbeat css, but its not working.

thanks

[glennrocksvb]

You just did step 1. Do step 2.

[webmsg]

Hi glennrocksvb

I added the above css but it didnt work

is there anything I need to edit before adding it to css_additional

Thank you.

[glennrocksvb]

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.

[Derwin]

Which icon?

the little guy with the + next to him in the register button. Just like what you have on this website.

[glennrocksvb]

Which icon?

[Derwin]

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.

[glennrocksvb]

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.

[glennrocksvb]

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

[Derwin]

https://vbmods.rocks/forum/vbulletin...t-guest-notice

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;
}

[glennrocksvb]

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-5-modifications/vbulletin-5-template-only-modifications/6697-sticky-default-guest-notice