XenForo v2.3.x Kayıt Ol Butonuna Animasyon Ekleme

[xenturka]

XenForo v2.3.x forum sitelerinde navigasyonda bulunan Kayıt Ol butonuna hareketli animasyon eklemek için aşağıda bulunan şablon düzenlemelerini yapabilirsiniz.

Temanızın PAGE_CONTAINER şablonunda bulun;

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

Bununla değiştirin;

<span class="p-navgroup-linkText"><span class="kayit-ol-animasyon">{{ phrase('register') }}</span></span>

Bu değişikliği yaptıktan sonra temanızın extra.less şablonuna aşağıdaki kodu ekleyin;

.kayit-ol-animasyon {
    position: relative;
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
    cursor: pointer;
    -moz-animation: kayit-ol-animasyon 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: kayit-ol-animasyon 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: kayit-ol-animasyon 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.kayit-ol-animasyon:hover {
    -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes kayit-ol-animasyon {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes kayit-ol-animasyon {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes kayit-ol-animasyon {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes kayit-ol-animasyon {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

Bu değişikliklerin ardından Kayıt Ol butonu ziyaretçilerinizin ilgisini çekecek yanıp sönerek animasyon efekti uygulanmış olacaktır.

Ekli dosyayı görüntüle xenforo-2.3.x-kayit-ol-butonu-animasyon.webp