Tema düzenleyici

Sayfa Genişliği

Sayfa Genişliğini Değiştir

Sayfa genişliğini değiştirmenizi sağlar
Diller

Tercih ettiğiniz dili seçin

Dil

Tema değişkenleri

Kullanmak istediğiniz stil varyasyonunu seçin

Sistem Aydınlık Karanlık
Kenar çubuğu

Kenar çubuğunu aç/kapat

Kenar çubuğunu aç veya kapat

Yapışkan kenar çubuğu

Kenar çubuğunun yapışkan bir şekilde görüntülenmesini sağlar

Kenar çubuğu pozisyonu

Sol

Sağ

JavaScript devre dışı. Daha iyi bir deneyim için, önce lütfen tarayıcınızda JavaScript'i etkinleştirin.

Sizlere Önemli Bir Mesajımız Var! 🎉

XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.

HAN · 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; } } }

Konuyu Başlatan HAN
Başlangıç tarihi 15 Eyl 2025
Cevaplar 0
Görüntüleme 108

Yönetici

HAN

WFN Moderatör

1/3

15 Eyl 2025

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:

 Kodları sadece üyelerimiz görebilir.

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

Less:

 Kodları 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.

← Önceki Konu

XenForo Hareketli Bildirimler

HAN
15 Eyl 2025
Cevaplar: 0

Sonraki Konu →

Hesap sayfasındaki yan navigasyon simgeleri - Icons in sidenav on Account page

HAN
15 Eyl 2025
Cevaplar: 0

Benzer Konular

XenForo Kayıt ol butonuna animasyon ekle

Cevaplar: 0

Görüntüleme: 98

31 Ağu 2025

HAN

XenForo Kayıt ol butonuna yanıp sönen ışık kodu

Cevaplar: 0

Görüntüleme: 69

15 Eyl 2025

HAN

XenForo Giriş yap ve Kayıt ol butonlarına icon ekleme

Cevaplar: 0

Görüntüleme: 96

15 Eyl 2025

HAN

XenForo Giriş yap ve kayıt ol butonu özelleştirme

Cevaplar: 0

Görüntüleme: 81

1 Eyl 2025

HAN

XenForo Giriş Yap, Kayıt Ol butonlarına icon ekleme

Cevaplar: 0

Görüntüleme: 91

30 Ağu 2025

HAN

Foruma git ?

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

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

Haftanın Trendleri

'Webmaster Forum® - WFN Nedir? Neden Bu Kadar Konuşuluyor?' makalesi
- Garfield
- 6 May 2026
5.00 yıldız

Yorumlar: 0
Konu 'Toplu Mailler İçin Hangi Servisi Kullanıyorsunuz?'
- Haz
- Perşembe saat 20:07'de
Cevaplar: 7
Konu 'WFN - Forum Güncellemeleri'
- Garfield
- 7 Kas 2025
Cevaplar: 1
S
Konu 'Xengentr Yada Xentr Çalışan Temalardan Ekler Misiniz'
- Symbolic
- Pazar saat 17:50'de
Cevaplar: 6
Konu 'Web Siteleriniz İçin Seo Çalışması Yapıyor musunuz?'
- Garfield
- Cuma saat 07:48'de
Cevaplar: 5

Ayın Trendleri

'Webmaster Forum® - WFN Nedir? Neden Bu Kadar Konuşuluyor?' makalesi
- Garfield
- 6 May 2026
5.00 yıldız

Yorumlar: 0
Konu 'WFN - Forum Güncellemeleri'
- Garfield
- 7 Kas 2025
Cevaplar: 1
Konu 'Sizce Forum Teması Nasıl Olmuş?'
- SyLvesTR
- 5 May 2026
Cevaplar: 10
Konu 'Toplu Mailler İçin Hangi Servisi Kullanıyorsunuz?'
- Haz
- Perşembe saat 20:07'de
Cevaplar: 7
S
Konu 'Xengentr Yada Xentr Çalışan Temalardan Ekler Misiniz'
- Symbolic
- Pazar saat 17:50'de
Cevaplar: 6

Dikkat!

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren WebmasterForum.NET adresimizde, 5651 Sayılı Kanun’un 8. maddesi ile Türk Ceza Kanunu’nun 125. maddesi uyarınca, üyelerimiz tarafından yapılan tüm paylaşımların hukuki sorumluluğu ilgili üyeye aittir. WebmasterForum.NET hakkında yapılacak tüm hukuki şikayetler, iletişim bağlantımız üzerinden tarafımıza iletildikten sonra en geç 3 (üç) gün içerisinde ilgili mevzuat çerçevesinde incelenecek, gerekli işlemler yapılacak ve başvuru sahibine bilgi verilecektir.

Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz.

Kabul Daha fazla bilgi edin…

Geri

Üst

Tema düzenleyici

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

Sayfa Genişliği

Sayfa Genişliğini Değiştir

Diller

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.

HAN