Xenforo Pulsing Register Button

Dr.Pavlov

Инквизитор
Staff member
Admin
Would you like to attract the attention of visitors who visit the forum?

After the following code operation, the "Register" button will appear around the heartbeat.

pulsing-register-button.gif

1-) Add to extra.less template

[HIDE=3]
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, 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);}}
[/HIDE]

2-) In "Page_container" find :

Code:
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>
Add new class like so:

Code:
<span class="p-navgroup-linkText"><span class="pulse">{{ phrase('register') }}</span></span>
 
Top