Css ile 3 Farklı Buton Yapımı

Daha önce css sprite ile güzel bir indirme butonu yapmıştık, şimdi de sizlere çok güzel 3 farklı tarzda buton yapımını göstereceğim. Bu tarz butonları genellikle eklenti anlatımları yapıp demo gösteren veya benim gibi tema paylaşan bloggerlar kullanıyor.

3 farklı renk seçeneği göze hayet hoş geliyor.

Bu aralar ilham geldikçe bu tür basit ama etkili yazılar yazmak istiyorum inşaAllah başarıyorumdur acemi bir coder olarak :)

Aşağıda butonların demolarını, gerekli kodları ve nasıl kullanacağınızı anlattım kolay gelsin...

Ana Sayfa Önizleme İndir

Öncelikle tema kodlarınız arasında aşağıdaki kodu bulun

]]></b:skin>

Bulduktan sonra yukarıdaki kodun hemen üzerine aşağıdaki css kodlarını ekleyin

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

Temanızı kaydedip çıkın.

Butonları yazılarımda nasıl kullanabilirim?

Demo buton kodu:

<a class="demobutton button" href="DEMO LİNKİ BURAYA" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Önizleme</span></a>

Anasayfa buton kodu:

<a class="button homebutton" href="ANASAYFA LİNKİ BURAYA" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Ana Sayfa</span></a>

İndir buton kodu:

<a class="button downloadbutton" href="İNDİRME LİNKİ BURAYA" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">İndir</span></a>

Butonları yazılara eklemek istediğiniz zaman resimdeki gibi ok işareti ile gösterdiğim yere verdiğim indir, anasayfa ve demo buton kodlarını yapıştırın ve linkleri yerleştirin.

Tabi ki kodlar demo download linki dışında her türlü linki göstermek için kullanılabilir 3 seçenek içinden istediğinizi seçin sizin zevkinize kalmış.