Butonların Çizgi Ekleme Css

CSS ile Düğmelere Çizgi Ekleme

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. CSS kullanarak düğmelere çizgi ekleyerek web sayfalarınıza görsel ilgi ve netlik katabilir ve kullanıcı arayüzünü geliştirebilirsiniz.

Çizgi Ekleme Yöntemleri

CSS ile düğmelere çizgi eklemanın iki ana yönü vardır:

1. Kenarlıklar (Border)

Kenarlıklar, bir öğenin etrafına çizgi eklemeye yarar. Düğmelere çizgi eklemeye yönelik en yaygın yöntemdir.

2. Gölge (Box-shadow)

Gölge, bir öğenin etrafına çizgi benzeri bir etki ekler. Kenarlıklarla karşılaştırıldıklarında daha ince ve daha az belirgindir.

Kenarlıklar Kullanarak Çizgi Ekleme

Kenarlıklar kullanarak düğmelere çizgi eklemeye yönelik CSS kodları şu şekildedir:

“`css
/ Kenarlık kalınlığı /
border-width: 1px;

/ Kenarlık rengi /
border-color: #000;

/ Kenarlık stili /
border-style: solid;
“`

Bu kodlar, düğmeye 1 piksel kalınlığında, siyah renkli ve kesik çizgili bir kenarlık ekleyecektir.

Kenarlık Stili Seçenekleri:

  • solid: Kesik çizgi
  • dashed: Kesikli çizgi
  • dotted:Noktalı çizgi
  • double: Çift çizgi

Gölge Kullanarak Çizgi Ekleme

Gölge kullanarak düğmelere çizgi eklemeye yönelik CSS kodları şu şekildedir:

css
/* Gölge yatay konumu */
box-shadow: 0px 1px 0px #000;

Bu kodlar, düğmeye 1 piksel kalınlığında, siyah renkli ve düğmeden 1 piksel sağa kaydırılmış bir gölge ekleyecektir.

Gölge Konum Seçenekleri:

  • 0px 1px 0px: Sağa 1 piksel kaydırılmış
  • 1px 0px 0px: Aşağıya 1 piksel kaydırılmış
  • 0px -1px 0px: Yukarıya 1 piksel kaydırılmış
  • -1px 0px 0px: Sol 1 piksel kaydırılmış

Örnekler

Kenarlıklı Düğme:

html
<button>Kenarlıklı Düğme</button>

css
button {
border-width: 1px;
border-color: #000;
border-style: solid;
}

Gölge Düğme:

html
<button>Gölge Düğme</button>

css
button {
box-shadow: 0px 1px 0px #000;
}

İpuçları

  • Düğmelerinize daha fazla görsel ilgi katmak için farklı kenarlık stilleri ve renkleri kullanın.
  • Gölge kullanarak düğmelere derinlik ve boyut katın.
  • Düğmelerinize hover ve focus durumları için farklı çizgi stilleri uygulayın.
  • Düğmelerinize çizgi eklerken web sitesinin genel tasarımını ve renk şemasını göz önünde bulundurun.

Faydalı Kaynaklar

Yayımlandı

kategorisi