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.
İlk olarak aşağıdaki kısmı, sayfanızın herhangi bir yerine, sadece bir kez eklemelisiniz. Bu sayede ekleyeceğiniz düğme kodlarının tasarımını yapmış olacaksınız:
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;
Aşağıdaki kodlar ise düğmeler oluşturur. Bu düğmelerden sayfanızın dilediğiniz yerine, dilediğiniz miktarda ekleyebilirsiniz:
<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Düğme Ekleme Kodu - Flat Html Buton Kodları-->
<!-- 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-->
<script src="https://www.koddostu.com/duzelt.js?no=102"></script>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;
Aşağıdaki kodlar ise düğmeler oluşturur. Bu düğmelerden sayfanızın dilediğiniz yerine, dilediğiniz miktarda ekleyebilirsiniz:
<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Düğme Ekleme Kodu - Flat Html Buton Kodları-->
<!-- 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>
<script src="https://www.koddostu.com/duzelt.js?no=103"></script>