Tema düzenleyici

Sayfa Genişliği

Sayfa Genişliğini Değiştir

Sayfa genişliğini değiştirmenizi sağlar
Tema değişkenleri

Kullanmak istediğiniz stil varyasyonunu seçin

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ğ

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

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

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

Konuyu Başlatan Nevzat
Başlangıç tarihi 15.09.2025
Cevaplar 0
Görüntüleme 12

Tümünü gör

Nevzat

TFC Üye

1/3

15.09.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:

İç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.

Foruma Git ?

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

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

Benzer Konular

XenForo [OzzModz] Email Whitelist - Sadece izin verilen e-postalar ile kayıt - Türkçe 2.0.4

Cevaplar: 0

Görüntüleme: 24

20.09.2025

Nevzat

XenForo Posbit Kayıt Tarihi ( Ay Gün)

Cevaplar: 0

Görüntüleme: 20

15.09.2025

Nevzat

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

Cevaplar: 0

Görüntüleme: 13

15.09.2025

Nevzat

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

Cevaplar: 0

Görüntüleme: 21

15.09.2025

Nevzat

XenForo [XenGenTr] Ziyaretçi giriş ve kayıt ol paneli 1.0.1

Cevaplar: 0

Görüntüleme: 21

08.09.2025

Nevzat

Paylaş:

Vk Ok Blogger Diaspora Weibo Mastodon Facebook X (Twitter) Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Telegram Viber Skype E-posta Google Yahoo Evernote Xing Link

Son Mesajlar

Toplumsal Değişim Teknoloji ve Sosyal Medya Dili Nasıl Etkiler? (3 İçerde)
- En son: Garfield
- 15 dakika önce
Teknoloji Haberleri & Sohbeti
Mumya 4 Resmen Geliyor!
- En son: Kreathex
- Bugün 01:41
Sinema & TV
Samsung Galaxy S26 Lansman Tarihi Sızdı (1 İçerde)
- En son: Kreathex
- Bugün 01:39
Android
PlayStation 5 Arayüzünde “Cross-Buy” Dönemi Geri mi Geliyor?
- En son: Kreathex
- Bugün 01:37
Konsol Evreni
Xiaomi’den Kötü Haber: 20 Cihaz HyperOS 3.1 Güncellemesini Alamayacak (1 İçerde)
- En son: Kreathex
- Bugün 01:36
Android

Son Konular

Mumya 4 Resmen Geliyor!
- Başlatan Kreathex
- Bugün 01:41
- Derecelendirme: 0
- Cevaplar: 0
Sinema & TV
Samsung Galaxy S26 Lansman Tarihi Sızdı (1 İçerde)
- Başlatan Kreathex
- Bugün 01:39
- Derecelendirme: 0
- Cevaplar: 0
Android
PlayStation 5 Arayüzünde “Cross-Buy” Dönemi Geri mi Geliyor?
- Başlatan Kreathex
- Bugün 01:37
- Derecelendirme: 0
- Cevaplar: 0
Konsol Evreni
Xiaomi’den Kötü Haber: 20 Cihaz HyperOS 3.1 Güncellemesini Alamayacak (1 İçerde)
- Başlatan Kreathex
- Bugün 01:36
- Derecelendirme: 0
- Cevaplar: 0
Android
Haber AMD’ye 3D V-Cache Teknolojisi Nedeniyle Patent Davası Açıldı
- Başlatan Kreathex
- Bugün 01:34
- Derecelendirme: 0
- Cevaplar: 0
Teknoloji Haberleri & Sohbeti

Dikkat!

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren TeknolojiForum.com adresimizde 5651 Sayılı Kanun'un 8. Maddesine ve T.C.K' nın 125. Maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. TeknolojiForum.com hakkında yapılacak tüm hukuksal şikayetler iletişim linkimizden bize ulaşıldıktan en geç 3 (üç) gün içerisinde ilgili kanunlar ve yönetmelikler çerçevesinde tarafımızca incelenerek, gereken işlemler yapılacak ve tarafından bilgi verilecektir.

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

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

Benzer Konular

Son Mesajlar

Son Konular

Dikkat!

XenForo Kayıt Ol Buttonuna Border Animasyonu Ekliyoruz.