XF 2.0 - Kalp Atışı Şeklinde Kayıt Ol Butonu (Pulsing Register Button) | XenGenTr - Türkiye'nin XenForo Türkçe destek topluluğu

Forumu ziyaret eden ziyaretçiler dikkatini "Kayıt ol" butonun çekmek istermisiniz.

Aşağıdaki kod çalışması sonrasında "Kayıt Ol" butonu etrafında kalp atışına benzer bir animasyon çıkacaktır.

SONUÇ:

NOT: Default tema üzerinde herhangi bir revizyon yapmadan önce kendi CHILD default temanızı oluşturmayı unutmayınız.

ip ucu - En ideal şekilde Xenforo TEMA Kurulumu, Upgrade ve Kullanımı

NASIL Yapılır:
1- ) Kullanmak olduğunuz temanızın "extra.less" şablonuna şu kodları ilave ediyoruz.

Kod:

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

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

2-) "Page_Container" şablonunda :

BUL:

Kod:

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

DEĞİŞTİR:

Kod:

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

Tepkiler: Sawyer1453, KiraAmora61, Birisi ve 24 diğerleri

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

XF 2.0 Kalp Atışı Şeklinde Kayıt Ol Butonu (Pulsing Register Button)

mkucuksari ait diğer kaynakar

Bu kaynağı paylaş

Son incelemeler

Foruma hoş geldin 👋, Ziyaretçi

Gizliliğinize değer veriyoruz