How to Create a Pulsating Button using CSS Animation

[Derwin]

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.

[glennrocksvb]

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]

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

[glennrocksvb]

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]

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)

[asd937]

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 ?

[faustvasea]

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

[glennrocksvb]

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.

[chocodz]

like post reply and new topic and subscribe

[glennrocksvb]

The first question is where do you want to use this pulsating effect?

[chocodz]

dont know where to go exact

[glennrocksvb]

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

[glennrocksvb]

chocodz, follow Steps 2 and 3. What do you want to have this pulsating effect?

[chocodz]

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

[naijafinder]

Demo:

My ♥ beats like this

Is there anyway to add announcement icon in replacement of the love icon character ♥