SnippetUI
← Back to snippets

Degrade Kenarlıklı Buton

Bu düğme bileşeni, CSS "-webkit-mask-composite" ile animasyonlu degradeyi birleştirerek güzel bir dönen degrade kenarlığına sahiptir.

HTMLCSS

Önizleme

Arka planı şeffaf olan ve yalnızca kenarlığı geçişli olarak parlayan bir düğme. JavaScript gerektirmeyen saf CSS uygulaması.

Kullanım durumları ve özellikleri

  • Temiz Tasarım: Arka plan tamamen şeffaftır. Yalnızca kenarlığın derecelendirmesinin öne çıktığı ve içeriğe müdahale etmeyen basit bir görünüm.

  • Simgeler, araç çubukları ve parlak düğmeler için uygundur: Tiyatro haritaları gibi koyu arka planlara yerleştirilen kontrol düğmeleri için uygundur.

  • JavaScript gerekmez: Yalnızca “animasyon” ve “maske-bileşik” ile elde edilir. Minimum performans etkisi.

  • Genişletilmesi kolay varyasyonlar: Yalnızca “doğrusal degrade” rengini değiştirerek farklı temalara sahip düğmeler kolayca oluşturabilirsiniz.

Tasarım ve kullanıcı deneyiminin önemli noktaları

  1. mask-composite: exclusion nasıl çalışır**: ::before sözde elemanında padding: 2px ayarlandığında ve bu alandaki içerik kutusu ters olarak maskelendiğinde, yalnızca kenarlık görüntülenebilir.

  2. Gözü animasyonla yönlendirme: Dönen tonlama, gözü doğal bir şekilde önemli düğmelere çekmek için kenarlık üzerinde akar.

  3. Fareyle üzerine gelindiğinde ölçeği büyüt: “Dönüştürme: ölçek(1,05)” boyutunda küçük bir değişiklikle tıklama beklentisini ifade edin.

Nasıl kişiselleştirilir

Sadece ‘doğrusal degradenin’ rengini değiştirerek varyasyonlar oluşturabilirsiniz:


/* サンセット */

.gb-btn::before {

  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);

}



/* オーCamgöbeği */

.gb-btn::before {

  background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6);

}

Kenarlığın genişliğini değiştirmek için “padding” değerini değiştirin:


/* 幅を広く (3px) */

.gb-btn::before { padding: 3px; }

.gb-btn::after { inset: 3px; }

Uygulama kodu

<button class="gb-btn">Primary</button>

<button class="gb-btn gb-btn-success">Success</button>

<button class="gb-btn gb-btn-warning">Warning</button>



<style>
.gb-btn {

position: relative;

background: transparent;

border: none;

padding: 14px 36px;

font-size: 1rem;

font-weight: 600;

letter-spacing: 0.08em;

cursor: pointer;

border-radius: 8px;

color: white;

z-index: 1;

transition: transform 0.2s ease, box-shadow 0.3s ease;

}

.gb-btn::before {

content: '';

position: absolute;

inset: 0;

padding: 2px;

border-radius: 8px;

background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe);

background-size: 400% 400%;

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

animation: gb-rotate 3s ease infinite;

}

.gb-btn::after {

content: '';

position: absolute;

inset: 2px;

border-radius: 6px;

background: rgba(17,24,39,0.9);

z-index: -1;

}

.gb-btn:hover { transform: scale(1.05); }

.gb-btn-success::before { background: linear-gradient(45deg, #43e97b, #38f9d7); }

.gb-btn-warning::before { background: linear-gradient(45deg, #f7971e, #ffd200); }

@keyframes gb-rotate {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

}
</style>

Tarayıcı uyumluluk durumu

| Tarayıcı | Uyumluluk durumu |

|----------|----------|

| Krom 80+ | ✅ Tamamen uyumlu |

| Firefox 99+ | ✅ Tamamen uyumlu |

| Safari 15.4+ | ✅ Uyumlu |

| Kenar 80+ | ✅ Tamamen uyumlu |

Not: Eski Safari, -webkit-mask-composite: xor gerektirir. Geri dönüş olarak kabul edilebilir durumlarda “kenarlık: 2px katı” kullanılabilir.