× İletişim Formu Blog Sayfa ve Yayınlarında Kullanılan Butonlar Arlina Design 11/19/2017 Etiketler : Buton Arlina Design <!DOCTYPE html> <html lang="tr_TR"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); @import url('https://ar-themes.github.io/fonts/fontawesome.bootstrap-no-glyph.min.css'); body { font-family: 'Fira Sans Condensed', sans-serif; line-height:1.42857; color: #444; background: #f7f7f7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7sErQvfXbpAbnbyL9Xn3aEY2pZ8rKv8-sVNWv0XBYT2qeXb0S1E6vEo8yBBe-lzeEoRYxyHAJBhJfcaHd8iRHQ-lk-j-QsdV0szQSaUAWW_83Xf7uvovx1WFGpysR0ToSRuBmwexhm4/s1600/noise.png) repeat scroll top center; padding: 0; margin:0 } header { margin: 0; padding-bottom: 15px; } header, footer { text-align: center; background: #fff; } footer { clear: both; margin: auto; padding: 10px 0 0; font-size: 14px; display: block; overflow: hidden; position: relative; } .post-body img { border: 3px solid #eee; } img { max-width: 100%; } .row { margin-left: -20px; margin-right: -20px; padding: 0 5px } header a { display: inline-block; } header h1 { text-shadow: 0.5px 0.5px #3A3F47, 1.5px 1.5px #3a3f47; color: #FFBE45; transition: all 0.3s ease-out; font-weight: 700; } footer a { color: #F97413; text-decoration: none; } h1:hover, a:hover { text-decoration: none; } .post-body .row { margin-left: -20px; margin-right: -20px; padding: 0 5px 20px; } .post-body { padding: 20px; border: 1px solid #eee; border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; margin-bottom: 20px; margin-top: 20px; background-color: #FFF; } blockquote { display: block; } .alert i { position: absolute; left: 20px; top: 20px; } a { color: #f97413; text-decoration: none; max-width: 100%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } a:visited { color: #f97413; text-decoration: none; } pre { overflow: hidden; border: none; border-radius: 0 } .alert { position: relative; border: 0; border-radius: 0 } .alert i { position: absolute; left: 20px; top: 20px } .alert p { overflow: hidden; margin: 2px 0 0 30px } .btn { border-radius: 0; margin: 0 5px 5px 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s } .btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus { outline: none } a.btn { text-decoration: none !important } .nav-tabs { padding: 0 !important; margin: 0 !important; border: 0 } .nav-tabs > li { margin: 0 !important } .nav-tabs > li > a { margin: 0; border-radius: 0; border: 1px solid #ddd !important; border-right: 0 !important; border-bottom: 0 !important } .nav-tabs > li:last-child > a { border-right: 1px solid #ddd !important } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background: #F97413; color: #fff } .tab-content { border: 1px solid #ddd; padding: 15px } .tooltip.top .tooltip-arrow { border-top-color: #F97413 } .tooltip.right .tooltip-arrow { border-right-color: #F97413 } .tooltip.bottom .tooltip-arrow { border-bottom-color: #F97413 } .tooltip.left .tooltip-arrow { border-left-color: #F97413 } .tooltip-inner { background-color: #F97413 } .panel-group .panel { border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0 } .panel-group .panel-heading { padding: 0; border-radius: 0 } .panel-group .panel-heading a { padding: 10px 15px; opacity: 1; display: block; text-decoration: none } .panel-group .panel-heading a:hover, .panel-group .panel-heading a:focus { text-decoration: none; opacity: 0.8 } .tooltip.top .tooltip-arrow { border-top-color: #F97413 } .tooltip.right .tooltip-arrow { border-right-color: #F97413 } .tooltip.bottom .tooltip-arrow { border-bottom-color: #F97413 } .tooltip.left .tooltip-arrow { border-left-color: #F97413 } .tooltip-inner { background-color: #F97413 } blockquote footer { text-align: left; } </style> </head> <body> <div class="wrapper"> <header> <a href="https://bloggereklentileri.blogspot.com"> <h1>BLOGGER EKLENTİLERİ</h1> </a> <h3>Blogger eklenti ve tema paylaşım blogu.</h3> </header> <div class="container"> <div class="blog-posts hfeed row"> <div class="full-side col-md-12"> <div class="post hentry inner"> <div class="post-body entry-content"> <h3>Butonlar</h3> <button class="btn btn-default btn-xs">Ekstra Küçük beyaz</button> <button class="btn btn-primary btn-xs">Ekstra Küçük mavi</button> <button type="button" class="btn btn-success btn-xs">Ekstra Küçük yeşil</button> <button type="button" class="btn btn-info btn-xs">Ekstra Küçük açık mavi</button> <button type="button" class="btn btn-warning btn-xs">Ekstra Küçük sarı</button> <button type="button" class="btn btn-danger btn-xs">Ekstra Küçük kırmızı</button> <br> <button class="btn btn-default btn-sm">Küçük beyaz</button> <button type="button" class="btn btn-primary btn-sm">Küçük mavi</button> <button type="button" class="btn btn-success btn-sm">Küçük yeşil</button> <button type="button" class="btn btn-info btn-sm">Küçük açık mavi</button> <button type="button" class="btn btn-warning btn-sm">Küçük sarı</button> <button type="button" class="btn btn-danger btn-sm">Küçük kırmızı</button> <br> <button class="btn btn-default">Normal beyaz</button> <button type="button" class="btn btn-primary">Normal mavi</button> <button type="button" class="btn btn-success">Normal yeşil</button> <button type="button" class="btn btn-info">Normal açık mavi</button> <button type="button" class="btn btn-warning">Normal sarı</button> <button type="button" class="btn btn-danger">Normal kırmızı</button> <br> <button class="btn btn-default btn-lg">Büyük beyaz</button> <button type="button" class="btn btn-primary btn-lg">Büyük mavi</button> <button type="button" class="btn btn-success btn-lg">Büyük yeşil</button> <button type="button" class="btn btn-info btn-lg">Büyük açık mavi</button> <button type="button" class="btn btn-warning btn-lg">Büyük sarı</button> <button type="button" class="btn btn-danger btn-lg">Büyük kırmızı</button> <br> <button class="btn btn-success"> <i class="fa fa-th-list" aria-hidden="true"></i> Beyaz buton</button> <button class="btn btn-danger"> <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Sil</button> <button class="btn btn-default"> <i class="fa fa-cog" aria-hidden="true"></i> Ayarlar</button> <hr> <h3>İpuçları</h3> <p> Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Varsayılan ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Başka bir ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Diğer ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Son bir ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. </p> <hr> <p class="text-center"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="İpucu aracı solda"> İpucu aracı solda </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="İpucu aracı üstte"> İpucu aracı üstte </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="İpucu aracı altta"> İpucu aracı altta </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="İpucu aracı sağda"> İpucu aracı sağda </button> </p> <hr> <h3>Blockquotes</h3> <blockquote> <p> Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. </p> <footer> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler. </footer> </blockquote> <hr> <footer> <p>Copyright © 2016 <a href="https://bloggereklentileri.blogspot.com" target="_blank">Blogger Eklentileri</a>. Powered by <a href="https://www.blogger.com" target="_blank">Blogger</a>.</p> </footer> </div> </div> </div> </div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script> <script src='https://cdn.rawgit.com/jquerycods/0.0.1/master/itemrow.js' type='text/javascript'></script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blog Sayfa ve Yayınlarında Kullanılan Butonlar" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blog Sayfa ve Yayınlarında Kullanılan Butonlar Arlina Design 11/19/2017 Etiketler : Buton Arlina Design <!DOCTYPE html> <html lang="tr_TR"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); @import url('https://ar-themes.github.io/fonts/fontawesome.bootstrap-no-glyph.min.css'); body { font-family: 'Fira Sans Condensed', sans-serif; line-height:1.42857; color: #444; background: #f7f7f7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7sErQvfXbpAbnbyL9Xn3aEY2pZ8rKv8-sVNWv0XBYT2qeXb0S1E6vEo8yBBe-lzeEoRYxyHAJBhJfcaHd8iRHQ-lk-j-QsdV0szQSaUAWW_83Xf7uvovx1WFGpysR0ToSRuBmwexhm4/s1600/noise.png) repeat scroll top center; padding: 0; margin:0 } header { margin: 0; padding-bottom: 15px; } header, footer { text-align: center; background: #fff; } footer { clear: both; margin: auto; padding: 10px 0 0; font-size: 14px; display: block; overflow: hidden; position: relative; } .post-body img { border: 3px solid #eee; } img { max-width: 100%; } .row { margin-left: -20px; margin-right: -20px; padding: 0 5px } header a { display: inline-block; } header h1 { text-shadow: 0.5px 0.5px #3A3F47, 1.5px 1.5px #3a3f47; color: #FFBE45; transition: all 0.3s ease-out; font-weight: 700; } footer a { color: #F97413; text-decoration: none; } h1:hover, a:hover { text-decoration: none; } .post-body .row { margin-left: -20px; margin-right: -20px; padding: 0 5px 20px; } .post-body { padding: 20px; border: 1px solid #eee; border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; margin-bottom: 20px; margin-top: 20px; background-color: #FFF; } blockquote { display: block; } .alert i { position: absolute; left: 20px; top: 20px; } a { color: #f97413; text-decoration: none; max-width: 100%; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } a:visited { color: #f97413; text-decoration: none; } pre { overflow: hidden; border: none; border-radius: 0 } .alert { position: relative; border: 0; border-radius: 0 } .alert i { position: absolute; left: 20px; top: 20px } .alert p { overflow: hidden; margin: 2px 0 0 30px } .btn { border-radius: 0; margin: 0 5px 5px 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s } .btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus { outline: none } a.btn { text-decoration: none !important } .nav-tabs { padding: 0 !important; margin: 0 !important; border: 0 } .nav-tabs > li { margin: 0 !important } .nav-tabs > li > a { margin: 0; border-radius: 0; border: 1px solid #ddd !important; border-right: 0 !important; border-bottom: 0 !important } .nav-tabs > li:last-child > a { border-right: 1px solid #ddd !important } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background: #F97413; color: #fff } .tab-content { border: 1px solid #ddd; padding: 15px } .tooltip.top .tooltip-arrow { border-top-color: #F97413 } .tooltip.right .tooltip-arrow { border-right-color: #F97413 } .tooltip.bottom .tooltip-arrow { border-bottom-color: #F97413 } .tooltip.left .tooltip-arrow { border-left-color: #F97413 } .tooltip-inner { background-color: #F97413 } .panel-group .panel { border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0 } .panel-group .panel-heading { padding: 0; border-radius: 0 } .panel-group .panel-heading a { padding: 10px 15px; opacity: 1; display: block; text-decoration: none } .panel-group .panel-heading a:hover, .panel-group .panel-heading a:focus { text-decoration: none; opacity: 0.8 } .tooltip.top .tooltip-arrow { border-top-color: #F97413 } .tooltip.right .tooltip-arrow { border-right-color: #F97413 } .tooltip.bottom .tooltip-arrow { border-bottom-color: #F97413 } .tooltip.left .tooltip-arrow { border-left-color: #F97413 } .tooltip-inner { background-color: #F97413 } blockquote footer { text-align: left; } </style> </head> <body> <div class="wrapper"> <header> <a href="https://bloggereklentileri.blogspot.com"> <h1>BLOGGER EKLENTİLERİ</h1> </a> <h3>Blogger eklenti ve tema paylaşım blogu.</h3> </header> <div class="container"> <div class="blog-posts hfeed row"> <div class="full-side col-md-12"> <div class="post hentry inner"> <div class="post-body entry-content"> <h3>Butonlar</h3> <button class="btn btn-default btn-xs">Ekstra Küçük beyaz</button> <button class="btn btn-primary btn-xs">Ekstra Küçük mavi</button> <button type="button" class="btn btn-success btn-xs">Ekstra Küçük yeşil</button> <button type="button" class="btn btn-info btn-xs">Ekstra Küçük açık mavi</button> <button type="button" class="btn btn-warning btn-xs">Ekstra Küçük sarı</button> <button type="button" class="btn btn-danger btn-xs">Ekstra Küçük kırmızı</button> <br> <button class="btn btn-default btn-sm">Küçük beyaz</button> <button type="button" class="btn btn-primary btn-sm">Küçük mavi</button> <button type="button" class="btn btn-success btn-sm">Küçük yeşil</button> <button type="button" class="btn btn-info btn-sm">Küçük açık mavi</button> <button type="button" class="btn btn-warning btn-sm">Küçük sarı</button> <button type="button" class="btn btn-danger btn-sm">Küçük kırmızı</button> <br> <button class="btn btn-default">Normal beyaz</button> <button type="button" class="btn btn-primary">Normal mavi</button> <button type="button" class="btn btn-success">Normal yeşil</button> <button type="button" class="btn btn-info">Normal açık mavi</button> <button type="button" class="btn btn-warning">Normal sarı</button> <button type="button" class="btn btn-danger">Normal kırmızı</button> <br> <button class="btn btn-default btn-lg">Büyük beyaz</button> <button type="button" class="btn btn-primary btn-lg">Büyük mavi</button> <button type="button" class="btn btn-success btn-lg">Büyük yeşil</button> <button type="button" class="btn btn-info btn-lg">Büyük açık mavi</button> <button type="button" class="btn btn-warning btn-lg">Büyük sarı</button> <button type="button" class="btn btn-danger btn-lg">Büyük kırmızı</button> <br> <button class="btn btn-success"> <i class="fa fa-th-list" aria-hidden="true"></i> Beyaz buton</button> <button class="btn btn-danger"> <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Sil</button> <button class="btn btn-default"> <i class="fa fa-cog" aria-hidden="true"></i> Ayarlar</button> <hr> <h3>İpuçları</h3> <p> Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Varsayılan ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Başka bir ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Diğer ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. Açıklamalarınızı yazın ve görüntülenmesi için <a data-original-title="Son bir ipucu!" href="#" data-toggle="tooltip" title="">ipucu</a> bakabilirsiniz. </p> <hr> <p class="text-center"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="İpucu aracı solda"> İpucu aracı solda </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="İpucu aracı üstte"> İpucu aracı üstte </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="İpucu aracı altta"> İpucu aracı altta </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="İpucu aracı sağda"> İpucu aracı sağda </button> </p> <hr> <h3>Blockquotes</h3> <blockquote> <p> Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. </p> <footer> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler. </footer> </blockquote> <hr> <footer> <p>Copyright © 2016 <a href="https://bloggereklentileri.blogspot.com" target="_blank">Blogger Eklentileri</a>. Powered by <a href="https://www.blogger.com" target="_blank">Blogger</a>.</p> </footer> </div> </div> </div> </div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script> <script src='https://cdn.rawgit.com/jquerycods/0.0.1/master/itemrow.js' type='text/javascript'></script> </body> </html>
Yorum Gönder