How to Create a Pulsating Button using CSS Animation

[glennrocksvb]

I'm having a problem with the format of my post, how can you make the code (container) windows taller?

The line breaks in the source code were removed that's why the code container is not tall enough.

[glennrocksvb]

You should not add HTML code in CSS! There's no instruction that says so. Put all the necessary CSS code in css_additional template in AdminCP or CSS Editor in Sitebuilder.

Then put the HTML code for the Register button in the Notice itself. See post #11 to see what HTML code to use for the button.

[RUBE]

Hello Everybody,

I really like the Sticky Default Guest Notice, but I'm having problems with the pulsating Register Now text.
I went to css_additional.css and installed this code...

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

Everything worked fine, so then I went back & changed the code to this...

  <a href="http://www.mywebsite.com/register/" class="b-button b-button--primary heartbeat">Register Now!</a> .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);    }   .heartbeat {     -webkit-animation: pulse 1s ease infinite;     -moz-animation: pulse 1s ease infinite;     -ms-animation: pulse 1s ease infinite;     -o-animation: pulse 1s ease infinite;     animation: pulse 1s ease infinite;     display: inline-block; }  @-webkit-keyframes pulse {     0% {         -webkit-transform: scale(1);     }      25% {         -webkit-transform: scale(1.1);     }      50% {         -webkit-transform: scale(1);     }      100% {         -webkit-transform: scale(1);     } }  @-moz-keyframes pulse {     0% {         -moz-transform: scale(1);     }      25% {         -moz-transform: scale(1.1);     }      50% {         -moz-transform: scale(1);     }      100% {         -moz-transform: scale(1);     } }  @-ms-keyframes pulse {     0% {         -ms-transform: scale(1);     }      25% {         -ms-transform: scale(1.1);     }      50% {         -ms-transform: scale(1);     }      100% {         -ms-transform: scale(1);     } }  @-o-keyframes pulse {     0% {         -o-transform: scale(1);     }      25% {         -o-transform: scale(1.1);     }      50% {         -o-transform: scale(1);     }      100% {         -o-transform: scale(1);     } }  @keyframes pulse {     0% {         transform: scale(1);     }      50% {         transform: scale(1.1);     }      100% {         transform: scale(1);     }  

Nothing happened, The floating text message was there but no pulsating button. If someone could show me where I went wrong, I would be very happy. Maybe the order I put it in is wrong? I don't think I missed any code? Oh well,,,, HELP! Please go light on me as far as explaining things, I barely know the difference between HTML and a hot meal... Like my name says - I'm a RUBE!

Thank You for Your Time!!!!! RUBE

[rnedelkow]

Nice little css. I'd like to have that little pin show up in the right corner of the notice. Any chance you could share how to do this?

[webgeek247]

This is very simple but effective. Thanks.

[NumNum]

Thanks, Glenn!

[glennrocksvb]

Just add class="heartbeat" to the <a> tag for Join Now button after you added the CSS to css_additional template.

[NumNum]

If I want to make my "Join Now" button pulse [which is not a stock img], how do i link it in the html tag?

[glennrocksvb]

You're welcome. Thanks for the coffee!

[William]

Perfect, Glenn!

Thanks,
William

[glennrocksvb]

Add the "b-button" class to the button. If you want it to look like the primary button, also add "b-button--primary". There is also "b-button--special" class if you want. These are default vB5 classes to style the buttons.

<a href="https://www.christforums.org/register/" class="b-button b-button--primary heartbeat">Register Now!</a>

I will add this instruction to the first post.

[William]

Did you add the css in the first post to your css_additional template?

Yes. I put the code at the very top at line 1.

William

[glennrocksvb]

Did you add the css in the first post to your css_additional template?

[William]

I seem to have forgotten how to implement this. I added the above code to my css. And I want to add the pulsating button to my notices.

This is what I included in my notice:

<center><a href="https://www.christforums.org/register/" class="heartbeat">Register Now!</a></center>

Why is this not working?

William

[LarryMyster]

You don't use it as an HTML tag but use it in a class attribute in an HTML tag.

I see, i got it to work. I also put a copyright down at the bottom to point people here if their interested.