XenForo Kayıt ol butonuna animasyon ekle
Uyumlu XF Sürümleri- 2.2.X
- 2.3.X
Forumunuzun kayıt ol butonuna animasyon ekleyerek özelleştirin.
Kullandığınız temanızın page_container şablonu içerisinde aşağıdaki kodu bulun:
Kod:
<a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
data-xf-click="overlay" data-follow-redirects="on">Hemen altına aşağıdaki HTML kodunu ekleyin:
Kod:
<span></span>
<span></span>
<span></span>
<span></span>Kullandığınız temanızın extra.less şablonuna aşağıdaki kodu ekleyin ve kaydedin:
Less:
@keyframes registerAnim1 {
0% {
left: -100%;
}
50%,100% {
left: 100%;
}
}
@keyframes registerAnim2 {
0% {
top: -100%;
}
50%,100% {
top: 100%;
}
}
@keyframes registerAnim3 {
0% {
right: -100%;
}
50%,100% {
right: 100%;
}
}
@keyframes registerAnim4 {
0% {
bottom: -100%;
}
50%,100% {
bottom: 100%;
}
}
.p-navgroup-link--register {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 18px 30px;
text-decoration: none;
overflow: hidden;
transition: .5s;
span {
position: absolute;
display: block;
&:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: registerAnim1 1s linear infinite;
}
&:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: registerAnim2 1s linear infinite;
animation-delay: .25s;
}
&:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: registerAnim3 1s linear infinite;
animation-delay: .5s;
}
&:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: registerAnim4 1s linear infinite;
animation-delay: .75s;
}
}
}GÖRÜNÜM
