XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

Nevzat · 2025-09-15T15:26:26+00:00

Uyumlu XF 2 Sürümleri 2.2.X 2.0.X 2.1.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 PAGE_CONTAINER şablonunu açalım ve aşağıdaki kodu bulalım. Kullandığımız temanın extra.less şablonunu açalım ve aşağıdaki kodları ekleyelim. @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; } } }

Nevzat

WF Üye

1/3

15 Eyl 2025

#1

Uyumlu XF 2 Sürümleri

2.2.X
2.0.X
2.1.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 PAGE_CONTAINER şablonunu açalım ve aşağıdaki kodu bulalım.

HTML:

İçeriği sadece üyelerimiz görebilir.

Kullandığımız temanın extra.less şablonunu açalım ve aşağıdaki kodları ekleyelim.

Less:

İçeriği sadece üyelerimiz görebilir.

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol

Giriş Yap

Zaten bir hesabınız var mı? Buradan giriş yapın.

Bu konuyu görüntüleyen kullanıcılar

Toplam: 1 (Kullanıcı: 0, ziyaretçi: 1)

Tema düzenleyici

Sayfa Düzeni Görünüm Kenar çubuğu

Sayfa Genişliği

Sayfa Genişliğini Değiştir

Tema değişkenleri

Kenar çubuğu

Kenar çubuğunu aç/kapat

Yapışkan kenar çubuğu

XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

Nevzat

Bu konuyu görüntüleyen kullanıcılar

Son Mesajlar

Son Konular

Dikkat!

Tema düzenleyici

Sayfa Düzeni Görünüm Kenar çubuğu

Sayfa Genişliği

Sayfa Genişliğini Değiştir

Tema değişkenleri

Kenar çubuğu

Kenar çubuğunu aç/kapat

Yapışkan kenar çubuğu

discussion XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

Nevzat

Bu konuyu görüntüleyen kullanıcılar

Son Mesajlar

Son Konular

Dikkat!

XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.