İçeriğe geç
LibraryCSS
Butonlar

Mosaic Tile

Mosaic-tile button with multi-colored chips.

Görüntülenme
0
Ücretsiz

Önizleme izole bir çerçevede çalışır — efekt sayfanın stillerini etkilemez.

Mosaic Tile kaynak kodu

Üyelere açık
.fx-btn-mosaic-tile {
  padding: 14px 38px;
  border: 1px solid #1c1917;
  border-radius: 8px;
  background:
    conic-gradient(from 0deg, #ef4444 0deg 60deg, #f59e0b 60deg 120deg, #10b981 120deg 180deg, #06b6d4 180deg 240deg, #6366f1 240deg 300deg, #d946ef 300deg 360deg);
  background-size: 12px 12px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}
.fx-btn-mosaic-tile:hover { filter: brightness(1.2); transform: translateY(-2px); }

Kalan 0 satırı görmek için ücretsiz üye ol

Tüm efektler ücretsiz. Üyelik yalnızca tam kaynağı, kopyalamayı ve tarayıcı içi editörü açar.

Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.

Sorun bildir veya düzelt

Katkıda bulunanlar

LibraryCSSEfekti eklediKurucu
#hover#gradient#transform#shadow#border#filter

Mosaic Tile nasıl kullanılır?

  1. 1. HTML parçasını sayfanda kullanmak istediğin yere yapıştır.
  2. 2. CSS bloğunu stil dosyana veya bir <style> etiketine ekle.
  3. 3. Renkleri ve süreleri kendi tasarımına göre değiştir — bağımlılık yok, saf CSS.

Butonlar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Butonlar koleksiyonuna göz at.

Benzer Butonlar efektleri

Tümü