CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme

Merhabalar, önceki html site yapımı konulu ders serisinde standart HTML ve CSS kodlarını kullanarak basit bir web sitesi yapmıştık. Bu dersimizde ise CSS bilgisini biraz daha ilerletmek amacıyla CSS Buton Yapımı nasıl olur ve siteye eklediğimiz fotoğrafların kenarlarını nasıl ovalleştirebileceğimizi göstereceğim. Bu konuları öğrendikten sonra ise bir sonraki dersimiz HTML Üye Kayıt Sayfası nasıl yapılır onu öğreneceğiz.

 

Resmi oval yapma ile başlayalım;

 

Komutumuz: border-radius: 10%;
Stil satırları arasına ekleyeceğimiz bu komut ile yüzde değerini belirlediğimiz ölçüde resmin kenarlarını yuvarlayabiliyoruz.
Şimdi bunu bir class’a atayarak örnek kodumuzu yazalım.
ovalyap1 ve ovalyap2 adında 2 adet class oluşturarak %10 ve %50 kullanımlarına örnek verdik.

 

 

[php]

<html>
<head>
<title>Ders – CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme</title>
<meta charset="utf-8">

<style>

.ovalyap1{
border-radius: 10%;
}

.ovalyap2{
border-radius: 50%;
}
</style>
</head>

<body>

<img src="https://unsplash.it/300/300/?random">
<img src="https://unsplash.it/300/300/?random">

</body> </html>

[/php]

CSS Buton Yapımı

 

Burda kullanacağımız kodları tek tek açıklayacağım. Bir buton oluşturduktan sonra classımıza yazacağımız kodlar ve açıklamaları;

 

background-color:#44c767; –> Arka plan rengi
border:1px solid #18ab29;   –> 1px lik Sınır çizgisi belirleme ve renklendirme
cursor:pointer;               –> Üzerine gelince Mouse’nin imlecini değiştirme
color:#ffffff;                    –> Yazı rengi
font-family:Arial;           –> Yazı tipi
font-size:19px;                –> Yazı Boyutu
padding:20px 63px;      –> Div içerisine alan belirleme
text-decoration:none;   –> Yazının altı çizili çıkmasını engelleme

 

Buton classımıza hover (üzerine gelince yapılmasını istediğimiz komutları yazacağız) ve active (tıklanınca yapılmasını istediğimiz komutları yazacağız) özelliğini kullanarak extra güzel bir görüntü katacağız.

 

CSS kodlarımız

 

[php]

.buton {
background-color:#44c767;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:20px 63px;
text-decoration:none;
}
.buton:hover {
background-color:#5cbf2a;
}
.buton:active {
position:relative;
top:2px;
}

[/php]

 

 

Html Kodumuz

<button>Kayıt</button>

 

Yaptığımız çalışmanın Web görüntüsüne erişmek için buraya tıklayın

 

 

Bir önceki yazımız olan Css ve jquery ile desen kilidi yapımı başlıklı makalemizde css dersleri, css desen ve desen kilidi hakkında bilgiler verilmektedir.

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir