Pulsing Register Button

jessy Master Sergeant
Staff member
Moderating
badge id 32 1000 Resources badge id 109 NullPro Uploader badge id 104 You Are Richer badge id 108 NullPro Lover
Jun 28, 2020
2,789
1,206
$5,518
What you achieve:
ZOcef4f.gif

Add to extra.less template:

CSS:
/* 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, 1);
}
.pulse: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);}}
2-) In "Page_container" find :
HTML:
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
Add new class like so:
HTML:
<span class="p-navgroup-linkText"><span class="pulse">{{ phrase('register') }}</span></span>
 
Back
Top