CSSHTML · CSS · JSCanlı önizleme
Hover’da parlayan, tıklamada hafifçe içeri çöken gradient bir butonu yalnızca CSS ile yapıyoruz. Kodu düzenlemeden önce canlı önizlemede çalışırken görebilirsin.
HTML, CSS ve JS parçalarını ayrı ayrı ya da tek dosya olarak kopyala.
HTML’i sayfana, CSS’i stil dosyana, JS’i sayfa sonuna ekle.
Renkleri, metinleri ve ölçüleri markana göre değiştir. Lisans: serbest kullanım.
<button class="btn"><span>Hemen Başla</span></button>body{margin:0;min-height:100vh;display:grid;place-items:center;background:#0b1020;font-family:system-ui,sans-serif}
.btn{position:relative;overflow:hidden;padding:16px 34px;border:0;border-radius:14px;cursor:pointer;
font:600 16px/1 system-ui;color:#fff;background:linear-gradient(120deg,#4f46e5,#9333ea,#ec4899);
background-size:200% 100%;box-shadow:0 14px 34px -10px rgba(147,51,234,.7);
transition:background-position .5s,transform .15s,box-shadow .3s}
.btn:hover{background-position:100% 0;box-shadow:0 18px 40px -8px rgba(236,72,153,.7)}
.btn:active{transform:scale(.96)}
.btn::after{content:"";position:absolute;inset:0;width:40%;left:-60%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.btn:hover::after{left:130%;transition:left .7s}Hover’da parlayan, tıklamada hafifçe içeri çöken gradient bir butonu yalnızca CSS ile yapıyoruz. Kodu düzenlemeden önce canlı önizlemede çalışırken görebilirsin.
Aşağıdaki HTML, CSS ve JavaScript parçalarını ayrı ayrı kopyalayıp projene ekleyebilirsin. Önizleme, yazdığın kodun gerçek çıktısını gösterir.
Sorunu sor, deneyimini paylaş. Diğer yorumlara yanıt verebilirsin.
SSS bölümleri için klavye ve ekran okuyucu uyumlu, akıcı animasyonlu bir akordeon bileşenini kütüphanesiz yazıyoruz. Canlı önizlemede dene.
prefers-color-scheme ile sistem temasını algılayan, seçimi localStorage’da saklayan ve CSS değişkenleriyle çalışan koyu/açık tema anahtarını canlı örnekle yapıyoruz.
Fikrini anlat, 24 saat içinde dönüş yapalım.
