Sitemizin bu sayfasında; download button css, css download button, demo button css, css demo button, css demo ve download butonları yer almaktadır.
Sitenizde resimde ve alt kısımdaki önizlemede görmüş olduğunuz butonları kullanabilmeniz için sizlere vereceğimiz css kodlarını sitenizin css kodlarının yer aldığı bölüme eklemeniz ve html kodlarını ise butonların gösterilmesini istediğiniz yere eklemeniz yeterli olacaktır.
CSS Demo ve Download Butonları
CSS Kodu; Aşağıda yer alan CSS kodunu blogger kullanıcısı iseniz blogger admin paneline giriş yapıp sol menüden tema>özelleştir>gelişmiş yolunu takip ederek karşınıza çıkan css ekle bölümü içerisine buradaki CSS kodunu ekleyiniz.Wordpress ve diğer siteler style.css dosyasının en alt kısmına eklemeleri gerekmektedir.
Tasarım 1 CSS Kodu;
.buttonsozlerimorg1{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.buttonsozlerimorg1 ul{margin:0;padding:0}
.buttonsozlerimorg1 li{display:inline;margin:5px;padding:0;list-style:none}
.buttonsozlerimorg1 li a.demo,.buttonsozlerimorg1 li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.buttonsozlerimorg1 li a.download{background:#3498db}
.buttonsozlerimorg1 li a.demo:hover,.buttonsozlerimorg1 li a.download:hover{background:#666}
.buttonsozlerimorg1 li a.demo:active,.buttonsozlerimorg1 li a.download:active{cursor:pointer}
.buttonsozlerimorg1 li a.demo:after,.buttonsozlerimorg1 li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.buttonsozlerimorg1 li a.download:after{content:'\f019'}Tasarım 2 CSS Kodu;
.buttonsozlerimorg2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.buttonsozlerimorg2 ul{margin:0;padding:0}
.buttonsozlerimorg2 li{display:inline;margin:5px;padding:0;list-style:none}
.buttonsozlerimorg2 li a.demo,.buttonsozlerimorg2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.buttonsozlerimorg2 li a.download{background:#3498db}
.buttonsozlerimorg2 li a.demo:hover,.buttonsozlerimorg2 li a.download:hover{background:#666}
.buttonsozlerimorg2 li a.demo:active,.buttonsozlerimorg2 li a.download:active{cursor:pointer}
.buttonsozlerimorg2 li a.demo:after,.buttonsozlerimorg2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.buttonsozlerimorg2 li:hover a.demo:after,.buttonsozlerimorg2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}CSS kodumuzu ekledikten sonra sıra geldi butonumuzu site içerisinde göstermeye, bu işlem çok basit arkadaşlar, alt kısımda yer alan html kodunu demo ve download butonlarını nerede görmek istiyorsak oraya eklememiz yeterli olacaktır.
HTML Kodu; Aşağıda yer alan HTML kodu butonları göstermemiz için gerekli olan kodlardır, bu kodları ister yazı içerisine istersenizde sabit bir yere ekleyerek css ile tasarlanmış demo ve download butonlarını sitenize ekleyebilirsiniz.
Tasarım 1 HTML Kodu;
<div style="text-align: center;">
<ul class="buttonsozlerimorg1">
<li><a class="demo" href="https://www.blogarsi.com/" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.blogarsi.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Tasarım 2 HTML Kodu;
<div style="text-align: center;">
<ul class="buttonsozlerimorg2">
<li><a class="demo" href="https://www.blogarsi.com/" target="_blank">Demo Link</a></li>
<li><a class="download" href="https://www.blogarsi.com/" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear"></div>
Üst kısımda yer alan demo ve download buton çalışmalarının önizlemesi aşağıdaki gibidir. Büyük ve küçük olarak iki farklı buton tasarımı bulunmaktadır sizler istediğinizi kullanabilirsiniz.
CSS Demo Download Button Kod Önizleme;
CSS Demo ve Download Butonları sayfamızın burada sonuna geldik, Umarız beğenmişsinizdir, güzel günlerde kullanmanız dileğiyle, bizi tercih eden herkese teşekkürlerimizi sunarız, Ayrıca konu ile ilgili soru, görüş ve önerilerinizi alt kısımdaki yorum alanına yazabilir ve yorumlarınız ile bizlere destek olabilirsiniz.
