Bir sitenin premium hissettirmesinin yarısı küçük detaylardan gelir. Buton, bu detayların başında geliyor. Aşağıdaki örnekte sağdaki önizleme gerçek bir sandbox içinde çalışır: sekmelerden kodu incele, mobil/tablet düğmeleriyle genişliği değiştir.
<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}Nasıl çalışıyor?
- background-size: 200% gradient’i butondan geniş yapar; hover’da
background-positionkayarak renk akışı oluşturur. - ::after ile eğik beyaz bir şerit butonun üzerinden geçer;
overflow:hiddenşeridi buton dışında gizler. - :active durumunda küçük bir ölçek değişimi tıklama hissini güçlendirir.
Aynı mantığı standart bir kod bloğunda da görelim; kopyalayıp kendi projene yapıştırabilirsin:
@media (prefers-reduced-motion: reduce) {
.btn, .btn::after { transition: none; }
}
.btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }Hareketi azaltmayı tercih eden kullanıcılara saygı göstermek ve klavye odağını görünür kılmak, erişilebilirlik puanını doğrudan yükseltir.
