xF2 Eklenti XenForo Kayıt Ol Buttonuna Border Animasyonu

bot · 26 Eki 2023

Uyumlu XF 2 Sürümleri: 2.0.X 2.1.X 2.2.X

Merhaba arkadaşlar, kayıt ol buttonuna ufak bir border animasyonu ekleyelim. Siz renkleri ile animasyon hızı ile vs oynayabilirsiniz.

Kullandığımız temanın

Rich (BB code):

PAGE_CONTAINER

şablonunu açalım ve aşağıdaki kodu bulalım.

HTML:

<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 kodlarını ekleyelim.

HTML:

<span></span>
<span></span>
<span></span>
<span></span>

Kullandığımız temanın

Rich (BB code):

extra.less

şablonunu açalım ve aşağıdaki kodları ekleyelim.

CSS:

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

Sonuç: