Pulse effect on the registration button

Yondu · 12-02-2021, 08:48 PM

Add in your extra.less:

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

In PAGE_CONTAINER, search :

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

[u]Add a new class like this:
[/u]

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

Pulse effect on the registration button

Submitted by Yondu, 12-02-2021, 08:48 PM, Thread ID: 197742