Tag Archive: button


Bukalemun CSS Düğmeleri

Geçtiğimiz günlerde StumbleUpon’da yeni siteler keşfederken karşılaştığım bir makaleyi paylaşmak istedim. Bu makalede sitemizde kullanacağımız farklı renklerdeki butonları 3 dosyada nasıl toplayacağımız anlatılıyordu.

İşin Mantığı:
Yapmamız gereken şey öncelikle beyazdan griye doğru rengi kayan (gradient) bir buton oluşturmak olacak. Bunu izleyen aşama ise butona saydamlık vermek. Saydamlık vererek arkaplana koyduğumuz rengin butonun rengi gibi görünmesini sağlayacağız.

Butonumuz
Butonumuzu tasarladıktan sonra 3 parçaya böleceğiz. ilk iki parça butonun sağ ve sol başları olacak. üçüncü parça ise butonumuz ne kadar uzarsa uzasın işe yaramasını sağlayacak olan 1 piksellik orta parçayı oluşturmak olacak. Okumaya devam et

Uzunca bir süredir blog’um üstünden paylaşım yapmamıştım. Bunda biraz tatil modunun da etkisi olsa gerek. Bu günkü yazımızda Yatay ve dikey CSS menüleri hazırlamamızı sağlayan bir Web Uygulamasını tanıtacağız. CSS Menu Builder ile menü arkaplanının tipini ve menü tuşlarının şeklini belirledikten sonra renkler üstünde dilediğiniz oynamaları yaparak sitenize en uygun menüyü tasarlamanız mümkün. Şu an menü arkaplanı için kısıtlı seçim olsa da işinizi rahatlıkla görecektir.

CSS ile düğme yapımı

Table ayraçlarını kullanırken, arkaplan resmi atamasıyla kolaylıkla yapabildiğimiz birden fazla resim dosyalı butonları ilk zamanlarda div ile yapmak zor olmuştu. Fakat çok basit bir mantığı olan div yöntemini woork‘de ele almışlar. Yukarıdaki butonlarda kullanacağımız 1 düğme arkaplanı ve 7-8 tane de özel ikon gerekmekte.

<a class=”button” href=”#”>
<span class=”delete”>Bu yazıyı sil</span>
</a>

Burada gördüğünüz <a> bizim kapsayan elemanımızı span ise ikonu oraya ekleyecek elemanı ifade edecek.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Yukarıdaki CSS kodunda gördüğünüz gibi arkaplana geniş ve yuvarlak köşeli button.gif resmini ekledik.


.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Son kodumuz ile de delete class’ına sahip olan span elementine minik ikon ekledik. Orjinal yazıya ulaşmak ve kullanılan resimleri indirmek için ilgili yazıya bakabilirsiniz.

This article is written by Antonio Lupetti.