Pulsing Register Button

Pulsing Register Button

iamjudd

Active member
#1
iamjudd submitted a new resource:

Pulsing Register Button - Create a pulsing effect coming from your register button.

What you achieve:


Add to extra.less template:
Code:
/* PULSE ANIMATION */
.pulse {
    position: relative;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0...
Read more about this resource...
 
#9
change the pulse 1.25s
That makes the animation slower, but doesn't increase the delay between iterations.

I tried this out after googling a bit. I think it's okay.
Code:
@-webkit-keyframes pulse {
    20%, 100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes pulse {
    20%, 100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes pulse {
    20%, 100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}
@keyframes pulse {
    20%, 100% {
        box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);
    }
}
 
#13
Why are you editing the page container if you can do this all from the extra like this:
Code:
.p-navgroup-link--register {
    position: relative;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.p-navgroup-link--register:hover {
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
 
#14
I do not make manual changes...
this is why people create addons...

I would also suggest that it stop blinking
once someone registers and signed into the forum.

If you create an addon, then you can add other options
such as shaking certain buttons to get attention, etc...
I have a similar plugin that I use on my blog content,
and I can make just about anything dance on the page....
 
Top