Düğme Ekleme Kodu - Flat Html Buton Kodları by Kod Dostu on 5/22/2014 01:33:00 ÖS buton, buton ekleme, buton kodları, düğme, düğme kodları, flat, flat design, flat tasarım, hazır kod, sitene ekle adfxq yayınaef son ..xva baslikntd urlname Reklam Sitenize, flat tasarıma uygun birbirinden hoş renklere sahip düğmeler eklemek ister misiniz? Bu css3 & HTML buton kodlarıyla siteniz çok daha hoş gözükecek."Ayarlar"a tıklayarak kodu nasıl kullanacağınızı öğrenebilirsiniz. Bu düğmelerden kaç tane, ve nasıl ekleyebilirim? Sitenize bu düğmelerden dilediğiniz kadar ekleyebilirsiniz. Bu sayfadaki kodun içerisinde şöyle bir uyarı göreceksiniz: <!-- düğme kodları--> Bu uyarıdan önceki kısmı, sayfanızın herhangi bir yerine, sadece bir kez eklemelisiniz. Uyarıdan sonraki kısımda ise şu formattaki düğme kodları bulunur: <a class="koddostu mavi">Örnek Düğme</a> Bu kod bir düğme oluşturur. Bu düğmelerden sayfanızın dilediğiniz yerine, dilediğiniz miktarda ekleyebilirsiniz. Düğmeleri büyütebilir miyim? Evet! Kodun başlangıcına, şöyle bir kısım ekledik: padding:0px 12px; font-size:14px; Dilerseniz bu kısmı şu şekilde değiştirerek veya kendi değerlerinizi deneyerek düğmeleri büyütebilirsiniz: padding:5px 14px; font-size:17px; AyarlarÖnizlemeyi Görmek İçin Tıklayın <!-- Koddostu Flat Buton Kodları START--> <style>.koddostu.mavi,.koddostu.siyah,.koddostu.yesil,.koddostu.turuncu,.koddostu.kirmizi{ padding:0px 12px; font-size:14px; display:inline-block; height:34px; border:1px solid transparent; background:#8e8e93; line-height:34px; text-align:center; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color:#fff; margin:0px 2px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; box-sizing:content-box; -moz-box-sizing:content-box;}.koddostu.mavi:hover,.koddostu.siyah:hover,.koddostu.yesil:hover,.koddostu.turuncu:hover,.koddostu.kirmizi:hover{ cursor:pointer; background:#fff; color:#666; border-color:#bbb; } .koddostu.mavi{ background:#50B1F2;} .koddostu.siyah{ background:#34495E;} .koddostu.yesil{ background:#3DD17A;} .koddostu.turuncu{ background:#FAB13C;} .koddostu.kirmizi{ background:#FF5E4C;}</style> <!-- Koddostu Flat Buton Kodları STOP--> <!-- düğme kodları--> <a class="koddostu mavi">Örnek Düğme</a> <a class="koddostu siyah">Kayıt</a> <a class="koddostu yesil">Gönder</a> <a href="http://google.com" target="_blank" class="koddostu turuncu">Linkli Düğme Örneği</a> <a class="koddostu kirmizi">Daha Fazla</a> <!-- Koddostu Flat Buton Kodları START--> <style>.koddostu.mavi,.koddostu.siyah,.koddostu.yesil,.koddostu.turuncu,.koddostu.kirmizi{ padding:0px 12px; font-size:14px; display:inline-block; height:34px; border:1px solid transparent; background:#8e8e93; line-height:34px; text-align:center; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color:#fff; margin:0px 2px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; box-sizing:content-box; -moz-box-sizing:content-box;}.koddostu.mavi:hover,.koddostu.siyah:hover,.koddostu.yesil:hover,.koddostu.turuncu:hover,.koddostu.kirmizi:hover{ cursor:pointer; background:#fff; color:#666; border-color:#bbb; } .koddostu.mavi{ background:#50B1F2;} .koddostu.siyah{ background:#34495E;} .koddostu.yesil{ background:#3DD17A;} .koddostu.turuncu{ background:#FAB13C;} .koddostu.kirmizi{ background:#FF5E4C;}</style> <!-- Koddostu Flat Buton Kodları STOP--> <!-- düğme kodları--> <a class="koddostu mavi">Örnek Düğme</a> <a class="koddostu siyah">Kayıt</a> <a class="koddostu yesil">Gönder</a> <a href="http://google.com" target="_blank" class="koddostu turuncu">Linkli Düğme Örneği</a> <a class="koddostu kirmizi">Daha Fazla</a> Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: