Önceki yazılarımda HTML'de buton oluşturmaya örnek vermiştim. Şimdi bu butonların renklerini, yazı stillerini, kısaca görünümünü CSS ile nasıl değiştirebileceğimizi anlatacağım.
İlk olarak bir HTML dosyası oluşturuyorum ve kodlarımı yazmaya başlıyorum.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
şeklinde bir ana şablon oluşturuyorum.
Body kısmına gidiyorum ve buton oluşturuyorum. Normalde buton oluşturmak için aşağıdaki kodu kullanıyorduk ve resimdeki gibi bir görüntü elde ediyorduk.
<input type="button" value="Yazı" />
Şimdi ben butonuma class parametresi ekliyorum ve kodum
<input type="button" class="btn" value="Yazı" /> oluyor.
Head kısmına gidiyorum ve css kodlarımı yazıyorum. İlk olarak arkaplanını değiştiriyorum.
<style>
.btn
{
background:#7ef859;
}
</style>
Bu şekilde kaydedersem aşağıdaki görüntüyü elde ediyorum.
Şimdi butonun kenarlarını düzenliyorum.
<style>
.btn
{
background:#7ef859;
border:1px solid #26800b;
}
</style>
border:1px solid #26800b; kodunu ekliyorum ve görüntüm aşağıdaki gibi oluyor.
Şimdi butonumun yazı tipini, boyutunu ve rengini değiştiriyorum.
color:#001f84; -> font rengi
font-weight:bold; -> kalınlık
font-family:Verdana; -> yazı tipi
font-size:14px; -> büyüklük
Son olarak butonumun boyutunu ayarlıyorum.
width:100px; -> genişlik
height:50px; -> yükseklik
Siz de bu şekilde çok değişik butonlar oluşturabilir ve sitenizi göze daha hoş gelen bir hale dönüştürebilirsiniz :)
Kodun tamamı
2 yorum:
Yararlı bir yazı olmuş elinize emeğinize sağlık
Çook saolun cssyi nereye koycamı öğrenmiş oldum
Yorum Gönder