Our social:

16 Temmuz 2013 Salı

CSS ile buton düzenleme



Ö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

Elde ettiğim görüntü


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ı


1 yorum:

Baris dedi ki...

Yararlı bir yazı olmuş elinize emeğinize sağlık