Css ile Buton Tasarımı 
Bir web sitesinde olmazsa olmaz denilen tek şey butonlardır. Web sitesi içerisinde linklerin kullanımında formlardaki verilerilerin veritabanına iletilmesinde ve site tasarımında kullanırız. Peki bu butonları nasıl tasarlarız derseniz. bu dersimizde sizlere css ile buton tasarımından bahsedeceğim. Sizlerde yazıyı okudukça birşeyler öğrenecek ve kendinizce harika butonlar yapacaksınız. Harika buton yapımına bir adım kaldı. Okumaya devam ediniz…
Cssde Buton çeşitleri
Css ile oluşturabilecek olduğumuz butonların çeşitleri şunlardır.
- Linkleri oluştubilmek için
- Butonlar için
- ve form verileri gönderebilmek için kullanırız.
Html kodları
<a href=”#”>Sample button</a>
<button id=”save”>Sample button</button>
<input value=”save” type=”submit”>Sample button</button>
Css kodları
.button {
padding:5px;
background-color: #dcdcdc;
border: 1px solid #666;
color:#000;
text-decoration:none;
}
Ortaya çıkan görüntüsü
Örnekte olduğu gibi değişen sadece html kodlarında ki button input ve a href kısımlarıdır. Bunların değişik kullanımı ile değişik görümtüler ortaya çıkmaktadır.
Butonlara resim ekleme
Çoğu web sitesinde görmüş olduğumuz özelliklerden bir diğeride buton içerisinde sağa sola ortaya bir görselin eklenmesidir. şimdi bu uygulanamanın kodlarını ve ekrana yansımasını görelim…
.button {
padding: 5px 5px 5px 25px;
border: 1px solid #666;
color:#000;
text-decoration:none;
background: #dcdcdc url(icon.png) no-repeat scroll 5px center;
}
Buton dereceleri
Burada ise bir butonun normalde nasıl görüneceğine, imleç ile üzerine gelindiğinde nasıl görüneceğine ve tıklandıktan sonra ise nasıl görüneceğine dair kodları ve örnek uygulamanın sonucunu görsel ile göreceğiz…
Normal Görüntüsü
a:hover {
color:#f00;
}
Üzerine imleç gelince ortaya çıkacak görüntü
a:active {
color:#f00;
}
Tıklanınca ortaya çıkan görüntü
a:focus {
color:#f00;
}
Örnek olarak apple.com adresindeki buy now butonu buna örnektir.
Bir başka örnek ise;
bu örnekleri başka sitelerde hatta kendi sitenizde de bulmak mümkündür. Tıp ki bu sitede bulunduğu gibi kendi sitenizde mevcut olabilir.
Esnek düğmeler; Buton köşelerini yuvarlak yapma;
Çoğu sitede görmüş olduğumuz özellikten biride buton köşelerinin yuvarlak olarak yapılmasıdır. bunu yapmak için iki yol vardır. birincisi fotoğraf düzenleme programlarından birini açıp köşeleri yuvarlak yapma yada css ile yuvarlak yapma… biz ikinci yönteme burada değineceğiz.
Html kodu
Typical sliding doors button
css kodu
a {
background: transparent url(‘button_right.png’) no-repeat scroll top right;
display: block;
float: left;
/* padding, margins and other styles here */
}
a span {
background: transparent url(‘button_left.png’) no-repeat;
display: block;
/* padding, margins and other styles here */
}
Bu tekniğin sağladığı avantajlar;
Görsel açıdan zengin düğmeler oluşturmak için kolay bir yolu var;
Erişilebilirlik, esneklik ve ölçeklenebilirlik sağlar;
javascript gerektirmez
Eserler tüm tarayıcılarda aynıdır.
Buton için arkaplan resmi koyma, arkaplan ringi koyma,
a {
background: white url(buttons.png) 0px 0px no-repeat;
}
a:hover {
background-position: -30px 0px;
}
a:active {
background-position: -60px 0px;
}
Bu şekilde daha da buton yapımını görselleştirebilir. Zengişletirebiliriz. şimdilik hoşçakalın…
Loading ...
Yorumlananlar