Tasarlamak | Tasarıma yardımcı kaynaklar ve diğerleri

CSS ile 3 Boyutlu Düğme

Bildiğiniz gibi css ile birçok güzel şeyi yapabiliyoruz. Sayfa yapısı, menü derken bir de düğme yapımını (bu konu hakkında önceki yazılar 1, 2) css ile inceleyebiliriz.
Öncelikle işe yine css kodları ile başlıyoruz.

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}

.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}