- Katılım
- 6 Kas 2021
- Mesajlar
- 3,276
- Tepkime puanı
- 4,783
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
CSS ile Buton Tasarımı: 10 Farklı Şık Örnek
CSS, web sayfalarımıza görsel çekicilik katmak için en güçlü araçlardan biridir. Bu makalede, modern web tasarımlarında kullanabileceğiniz 10 farklı şık buton tasarımını adım adım inceleyeceğiz. Her bir örnek için tam CSS kodunu ve nasıl çalıştığını açıklayacağız.1. Basit ve Şık Buton
HTML:
<button class="elegant-btn">Tıkla</button>
CSS:
.elegant-btn {
padding: 12px 24px;
background-color: #4a6fa5;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.elegant-btn:hover {
background-color: #3a5a8f;
}- Yumuşak köşeler (border-radius)
- Fare üzerine gelindiğinde renk değişimi (hover efekti)
- Düzgün geçiş efekti (transition)
- Uygun padding ve font boyutu
2. Gradient Buton
HTML:
<button class="gradient-btn">Gradient Buton</button>
CSS:
.gradient-btn {
padding: 12px 30px;
color: white;
border: none;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
background: linear-gradient(45deg, #ff7e5f, #feb47b);
box-shadow: 0 4px 15px rgba(254, 180, 123, 0.4);
transition: all 0.3s ease;
}
.gradient-btn:hover {
background: linear-gradient(45deg, #feb47b, #ff7e5f);
box-shadow: 0 6px 20px rgba(254, 180, 123, 0.6);
transform: translate(-2px);
}- 45 derece açıyla gradient arka plan
- Yuvarlak köşeler (border-radius: 30px)
- Hafif gölge efekti (box-shadow)
- Hover'da yukarı hareket (transform: translateY)
3. Outline Buton
HTML:
<button class="outline-btn">Outline Buton</button>
CSS:
.outline-btn {
padding: 10px 28px;
background-color: transparent;
color: #4a6fa5;
border: 2px solid #4a6fa5;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.outline-btn:hover {
background-color: #4a6fa5;
color: white;
}- Şeffaf arka plan
- Belirgin border
- Hover'da tam dolgu efekti
- Minimal ve modern görünüm
4. 3D Etkili Buton
HTML:
<button class="btn-3d">3D Buton</button>
CSS:
.btn-3d {
padding: 12px 30px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 0 #3e8e41;
position: relative;
transition: all 0.1s ease;
}
.btn-3d:hover {
top: 2px;
box-shadow: 0 3px 0 #3e8e41;
}
.btn-3d:active {
top: 5px;
box-shadow: none;
}- Alt kısımda gölge ile 3D efekti
- Tıklandığında basılıyormuş hissi (active state)
- Hover'da hafif yukarı hareket
- Gerçekçi basma efekti
5. Iconlu Buton
HTML:
<button class="icon-btn">
<i class="fas fa-download"></i> İndir
</button>
CSS:
.icon-btn {
padding: 10px 20px 10px 15px;
background-color: #6c5ce7;
color: white;
border: none;
border-radius: 5px;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.icon-btn i {
margin-right: 8px;
}
.icon-btn:hover {
background-color: #5649c0;
padding-right: 25px;
}- Font Awesome ikonu ile birlikte
- İkon ve metin arasında boşluk
- Hover'da sağ padding artışı ile dinamik efekt
- Uyumlu renk paleti
6. Animasyonlu Buton
HTML:
<button class="animated-btn">Animasyonlu Buton</button>
CSS:
.animated-btn {
padding: 15px 30px;
background-color: #ff6b6b;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
z-index: 1;
}
.animated-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.animated-btn:hover::before {
left: 100%;
}- Işık geçiş animasyonu
:before pseudo-element) - Overflow: hidden ile animasyonun temizlenmesi
- Z-index kullanımı ile katman kontrolü
- Modern ve dikkat çekici efekt
7. Switch Buton
HTML:
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
CSS:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}- Gerçek bir toggle switch
- Checkbox input ile çalışır
- Yuvarlak tasarım
- Aktif/pasif durum renkleri
- Kaydırma animasyonu
8. Sosyal Medya Butonları
HTML:
<div class="social-buttons">
<button class="social-btn facebook"><i class="fab fa-facebook-f"></i></button>
<button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
<button class="social-btn instagram"><i class="fab fa-instagram"></i></button>
</div>
CSS:
.social-buttons {
display: flex;
gap: 15px;
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.social-btn:hover {
transform: scale(1.1) translateY(-5px);
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.instagram {
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}- Daire şeklinde butonlar
- Her platform için uygun renkler
- Instagram için gradient arka plan
- Hover'da hafif büyüme ve yükselme
- Flexbox ile hizalama
9. Neumorphism Buton
HTML:
<button class="neumorphism-btn">Neumorphism</button>
CSS:
.neumorphism-btn {
padding: 15px 30px;
background: #e0e5ec;
color: #4a6fa5;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
box-shadow: 8px 8px 15px #a3b1c6,
-8px -8px 15px #ffffff;
transition: all 0.3s ease;
}
.neumorphism-btn:hover {
color: #3a5a8f;
box-shadow: 4px 4px 10px #a3b1c6,
-4px -4px 10px #ffffff;
}
.neumorphism-btn:active {
box-shadow: inset 4px 4px 10px #a3b1c6,
inset -4px -4px 10px #ffffff;
}- Günümüzün popüler neumorphism tasarımı
- Çift gölge efekti
- Hover ve active durumları için farklı gölgeler
- Basılıyormuş hissi (active state)
- Soft ve modern görünüm
10. Loading Animasyonlu Buton
HTML:
<button class="loading-btn" id="loadingBtn">
<span class="btn-text">Gönder</span>
<span class="loading-dots">...</span>
</button>
CSS:
.loading-btn {
padding: 12px 24px;
background-color: #6c5ce7;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.loading-dots {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.loading-btn.loading .btn-text {
opacity: 0;
}
.loading-btn.loading .loading-dots {
opacity: 1;
animation: loadingAnimation 1.5s infinite;
}
@keyframes loadingAnimation {
0%, 100% { content: "."; }
33% { content: ".."; }
66% { content: "..."; }
}
JavaScript:
document.getElementById('loadingBtn').addEventListener('click', function() {
this.classList.add('loading');
setTimeout(() => {
this.classList.remove('loading');
}, 3000); // 3 saniye sonra animasyonu durdur
});- Tıklandığında loading animasyonu
- JavaScript ile kontrol edilebilir
- Animasyonlu üç nokta efekti
- Düzgün geçişler
- Gerçekçi yükleme simülasyonu
Sonuç
Bu 10 farklı buton stili, modern web tasarımlarında ihtiyaç duyabileceğiniz çeşitli durumları kapsamaktadır. Buton tasarımlarınızı geliştirirken dikkat etmeniz gereken bazı önemli noktalar:- Kullanılabilirlik: Butonların tıklanabilir alanı yeterli büyüklükte olmalı
- Erişilebilirlik: Renk kontrastı yeterli olmalı, focus durumları belirgin olmalı
- Tutarlılık: Aynı sayfadaki benzer işlevdeki butonlar aynı stilde olmalı
- Geribildirim: Kullanıcı etkileşimini (hover, active) mutlaka görselleştirin
- Performans: Aşırı karmaşık animasyonlardan kaçının
