Xenforo Pulsing Register Button

Dr.Pavlov

Verified seller
Professional Carder
Joined
Jul 11, 2016
Messages
3,788
Reaction score
1,273
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.

View attachment 2019

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