CSS ile Bağlantıları Butona Çevirme

Web tasarımında kullanıcı deneyimi (UX) her zaman önceliklidir. Düğmeler, kullanıcıların bir işlem yapmasını sağlayan en önemli öğelerden biridir. Ancak, bazen bir bağlantı (anchor) etiketi, tıklanabilir bir düğme gibi davranmalıdır. Bu dönüşüm, hem görsel tasarımı zenginleştirir hem de kullanıcıların web sitesinde gezinmesini kolaylaştırır.

Bağlantıları düğmelere dönüştürmek, özellikle harekete geçirici mesajlar (CTA) için yaygın olarak kullanılır. Örneğin, bir “Hemen Kaydol” düğmesi, standart bir metin bağlantısından çok daha dikkat çekici ve kullanışlıdır.

Bağlantıları düğme stilinde göstermek şu durumlarda faydalıdır:

Eylem Çağrıları (Call-to-Action – CTA): Kayıt olma, satın alma veya form gönderme gibi önemli işlemler için.
Navigasyon Menüsü: Düğme benzeri bağlantılar ile kullanıcıyı yönlendirme.
Form İşlemleri: Form gönderimi veya sıfırlama için şık ve işlevsel düğmeler.

CSS ile Temel Bağlantı Butonları Oluşturma

HTML’de Bağlantı (Anchor) Etiketlerinin Yapısı

HTML’deki bağlantı etiketleri, kullanıcıları bir sayfaya yönlendirmek için kullanılır. Temel yapı şu şekildedir:


<a href="https://www.ornek.com">Bağlantı Metni</a>

<a href="https://www.ornek.com">Bağlantı Metni</a>

Bu kod, “Bağlantı Metni” yazısına tıklayan kullanıcıları belirtilen URL’ye yönlendirir. Ancak, bu bağlantı varsayılan olarak sade bir görünüme sahiptir. CSS kullanarak, bunu düğme gibi görünecek şekilde özelleştirebiliriz.

CSS ile Temel Buton Stili Uygulama

Bir bağlantıyı düğmeye çevirmek için şu temel CSS özelliklerini kullanabiliriz:

Arka Plan Rengi (background-color): Düğmeye renk eklemek için.
Yazı Tipi ve Renk (font-family ve color): Metni stilize etmek için.
Padding: Düğmenin iç boşluğunu belirlemek için.
Border ve Border-Radius: Kenarlıkları ve yuvarlak köşeleri ayarlamak için.

Örnek: Basit Bir Bağlantıyı Düğmeye Çevirme

Aşağıda bir bağlantının nasıl düğme gibi görünecek şekilde tasarlandığı gösterilmektedir:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS ile Bağlantıyı Butona Çevirme</title>
  <style>
    .button {
      display: inline-block;
      background-color: #007BFF;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <a href="https://www.ornek.com" class="button">Hemen Kaydol</a>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSS ile Bağlantıyı Butona Çevirme</title>

<style>

.button {

display: inline-block;

background-color: #007BFF;

color: #fff;

text-decoration: none;

padding: 10px 20px;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

text-align: center;

transition: background-color 0.3s ease;

}

.button:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<a href="https://www.ornek.com" class="button">Hemen Kaydol</a>

</body>

</html>

Kodun Açıklaması:

display: inline-block: Bağlantıyı bir blok gibi davranacak şekilde ayarlar.
background-color: Düğmenin arka plan rengini belirler.
text-decoration: none: Alt çizgiyi kaldırır.
padding: İç boşluk ekler, böylece düğme büyür.
border-radius: Köşeleri yuvarlar.
transition: Hover durumunda arka plan renginin yumuşak bir geçişle değişmesini sağlar.

Bu örnek, sade bir düğme tasarımı için başlangıç noktasıdır. Sonraki bölümlerde, daha gelişmiş tasarımlar ve teknikler ele alınacaktır.

Farklı Buton Stili Tasarımları

Düz (Flat) Tasarımlar

Düz tasarımlar, minimalist ve modern bir görünüm sağlar. Gereksiz gölgeler ve üç boyutlu efektler olmadan temiz bir tasarım oluşturulur.

Örnek: Minimalist Bir Düz Buton Tasarımı


<style>
  .flat-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }

  .flat-button:hover {
    background-color: #45a049;
  }
</style>

<button class="flat-button">Gönder</button>

<style>

.flat-button {

background-color: #4CAF50;

color: white;

border: none;

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

}

.flat-button:hover {

background-color: #45a049;

}

</style>

<button class="flat-button">Gönder</button>

Yuvarlak Köşeli Butonlar

Köşeleri yuvarlatılmış butonlar, daha yumuşak bir estetik sağlar ve kullanıcı dostu bir his yaratır.

Örnek: Border-Radius ile Şık Bir Tasarım


<style>
  .rounded-button {
    background-color: #008CBA;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
  }

  .rounded-button:hover {
    background-color: #005f73;
  }
</style>

<button class="rounded-button">Kaydol</button>

<style>

.rounded-button {

background-color: #008CBA;

color: white;

padding: 10px 25px;

border: none;

border-radius: 25px;

font-size: 16px;

cursor: pointer;

}

.rounded-button:hover {

background-color: #005f73;

}

</style>

<button class="rounded-button">Kaydol</button>

Hover (Üzerine Gelince Değişen) Efektleri

Hover efektleri, kullanıcıyla etkileşimde görsel geri bildirim sunar ve dikkat çeker.

Örnek: Renk Geçişi ve Gölge Efektleri


<style>
  .hover-button {
    background-color: #f39c12;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
  }

  .hover-button:hover {
    background-color: #e67e22;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
</style>

<button class="hover-button">Detaylar</button>

<style>

.hover-button {

background-color: #f39c12;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 16px;

transition: all 0.3s ease;

}

.hover-button:hover {

background-color: #e67e22;

box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);

transform: scale(1.05);

}

</style>

<button class="hover-button">Detaylar</button>

Aktif Durum ve Tıklama Animasyonları

Buton tıklandığında kullanıcıya bir geri bildirim sunmak için animasyonlar kullanılır.

Örnek: Tıklanınca Küçülen Bir Buton Animasyonu


<style>
  .active-button {
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    transition: transform 0.1s ease;
  }

  .active-button:active {
    transform: scale(0.95);
  }
</style>

<button class="active-button">Tıkla</button>

<style>

.active-button {

background-color: #e74c3c;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 16px;

transition: transform 0.1s ease;

}

.active-button:active {

transform: scale(0.95);

}

</style>

<button class="active-button">Tıkla</button>

CSS ile Renk, Yazı Tipi ve İkon Kullanımı

Butonlarda Yazı Tipi ve Renk Uyumu

Renklerin ve yazı tiplerinin uyumu, butonların daha etkili görünmesini sağlar. Kontrast renkler ve okunaklı yazı tipleri kullanılmalıdır.


<style>
  .styled-button {
    background-color: #9b59b6;
    color: white;
    padding: 12px 24px;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
  }
</style>

<button class="styled-button">Daha Fazla Bilgi</button>

<style>

.styled-button {

background-color: #9b59b6;

color: white;

padding: 12px 24px;

border: none;

font-family: 'Arial', sans-serif;

font-size: 18px;

font-weight: bold;

}

</style>

<button class="styled-button">Daha Fazla Bilgi</button>

FontAwesome veya İkonlarla Zenginleştirilmiş Butonlar

İkonlar, butonları görsel olarak daha açıklayıcı hale getirir.

Örnek: İkon Eklenmiş Bir Buton Tasarımı


<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<style>
  .icon-button {
    background-color: #2ecc71;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
</style>

<button class="icon-button">
  <i class="fas fa-check"></i> Onayla
</button>

<head>

</head>

<style>

.icon-button {

background-color: #2ecc71;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 16px;

display: flex;

align-items: center;

gap: 10px;

}

</style>

<i class="fas fa-check"></i> Onayla

</button>

Duyarlı (Responsive) Buton Tasarımları

Mobil ve Masaüstü için Optimize Edilmiş Butonlar

Duyarlı tasarımlarda, butonların boyutları ve yerleşimleri ekran boyutuna göre ayarlanır.

Örnek: Flexbox ile Esnek Tasarım


<style>
  .responsive-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .responsive-button {
    background-color: #1abc9c;
    color: white;
    padding: 15px 30px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    text-align: center;
  }
</style>

<div class="responsive-container">
  <button class="responsive-button">Başla</button>
</div>

<style>

.responsive-container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.responsive-button {

background-color: #1abc9c;

color: white;

padding: 15px 30px;

font-size: 16px;

border: none;

border-radius: 10px;

text-align: center;

}

</style>

<button class="responsive-button">Başla</button>

</div>

Media Query Kullanımıyla Butonları Uyarlama

Media query ile buton boyutları ve tasarımları farklı cihazlar için optimize edilir.


<style>
  .media-button {
    background-color: #e84393;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
  }

  @media (max-width: 600px) {
    .media-button {
      padding: 10px 20px;
      font-size: 14px;
    }
  }
</style>

<button class="media-button">Mobil Uyumlu</button>

<style>

.media-button {

background-color: #e84393;

color: white;

padding: 12px 24px;

font-size: 16px;

border: none;

border-radius: 5px;

}

@media (max-width: 600px) {

.media-button {

padding: 10px 20px;

font-size: 14px;

}

</style>

<button class="media-button">Mobil Uyumlu</button>

İleri Seviye CSS Teknikleri ile Dinamik Butonlar

CSS Animasyonları ile Hareketli Butonlar

CSS animasyonları, butonlara hareket ve dinamizm kazandırır.

Örnek: Yavaş Yavaş Renk Değiştiren Bir Buton


<style>
  @keyframes colorChange {
    0% { background-color: #3498db; }
    50% { background-color: #9b59b6; }
    100% { background-color: #3498db; }
  }

  .animated-button {
    padding: 15px 30px;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    animation: colorChange 3s infinite;
  }
</style>

<button class="animated-button">Dinamik Buton</button>

<style>

@keyframes colorChange {

0% { background-color: #3498db; }

50% { background-color: #9b59b6; }

100% { background-color: #3498db; }

}

.animated-button {

padding: 15px 30px;

color: white;

font-size: 16px;

border: none;

border-radius: 5px;

animation: colorChange 3s infinite;

}

</style>

<button class="animated-button">Dinamik Buton</button>

CSS Değişkenleri (Custom Properties) ile Tema Yönetimi

CSS değişkenleri kullanarak temaları kolayca yönetebilirsiniz.


<style>
  :root {
    --primary-color: #2980b9;
    --hover-color: #1c598a;
  }

  .theme-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
  }

  .theme-button:hover {
    background-color: var(--hover-color);
  }
</style>

<button class="theme-button">Tema Yönetimi</button>

<style>

:root {

--primary-color: #2980b9;

--hover-color: #1c598a;

}

.theme-button {

background-color: var(--primary-color);

color: white;

padding: 10px 20px;

font-size: 16px;

border: none;

border-radius: 5px;

}

.theme-button:hover {

background-color: var(--hover-color);

}

</style>

<button class="theme-button">Tema Yönetimi</button>

CSS ile Temel Bağlantı Butonları Oluşturma

HTML’de Bağlantı (Anchor) Etiketlerinin Yapısı

CSS ile Temel Buton Stili Uygulama

Örnek: Basit Bir Bağlantıyı Düğmeye Çevirme

Kodun Açıklaması:

Farklı Buton Stili Tasarımları

Düz (Flat) Tasarımlar

Örnek: Minimalist Bir Düz Buton Tasarımı

Yuvarlak Köşeli Butonlar

Örnek: Border-Radius ile Şık Bir Tasarım

Hover (Üzerine Gelince Değişen) Efektleri

Örnek: Renk Geçişi ve Gölge Efektleri

Aktif Durum ve Tıklama Animasyonları

Örnek: Tıklanınca Küçülen Bir Buton Animasyonu

CSS ile Renk, Yazı Tipi ve İkon Kullanımı

Butonlarda Yazı Tipi ve Renk Uyumu

FontAwesome veya İkonlarla Zenginleştirilmiş Butonlar

Örnek: İkon Eklenmiş Bir Buton Tasarımı

Duyarlı (Responsive) Buton Tasarımları

Mobil ve Masaüstü için Optimize Edilmiş Butonlar

Örnek: Flexbox ile Esnek Tasarım

Media Query Kullanımıyla Butonları Uyarlama

İleri Seviye CSS Teknikleri ile Dinamik Butonlar

CSS Animasyonları ile Hareketli Butonlar

Örnek: Yavaş Yavaş Renk Değiştiren Bir Buton

CSS Değişkenleri (Custom Properties) ile Tema Yönetimi

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X