Google Materyal Buton Tasarımı

Yenileniyoruz...

7. Yılımızı geride bırakmışken sizlere değerli paylaşımlar yaptığımızı düşünüyoruz, 2021 yılına girmeden yeni arayüzümüz, yeni kategorilerimiz ve yeni yazarlarımızla sizlere ilk gün ki gibi içerikler paylaşmaya devam edeceğiz.

Hazır Site Bileşenleri Web Tasarımlar

Savaş Dersim Çelik | Perşembe Eylül 29th, 2016 | Yorum Yok | 1.476 Görüntülenme | 0 Like

Tasarıma ait kodlara konu içerisinden ulaşabilirsiniz veya RESULT butonuna tıklayarak Tasarıma öne izlemesine bakabilirsiniz Eğer tasarımı indirmek isterseniz konu altında yer alan download butonunu kullabilirsiniz.
</p> </div> <div class="post-bottom"> <div class="row"> <div class="col-md-12"> <div class="tags"> <h4>Etiketler</h4> <a href="https://webinyo.com/tag/buton-tasarimi">buton tasarımı</a> <a href="https://webinyo.com/tag/button">Button</a> <a href="https://webinyo.com/tag/design">design</a> <a href="https://webinyo.com/tag/effect">effect</a> <a href="https://webinyo.com/tag/google">google</a> <a href="https://webinyo.com/tag/material">material</a> <a href="https://webinyo.com/tag/materyal-tasarimi">Materyal tasarımi</a> <a href="https://webinyo.com/tag/ucretsiz-tasarim">ücretsiz tasarım</a> </div> </div> </div> </div> <div class="post-pager clearfix hidden-xs"> <ul class="pager row"> <li class="previous col-md-6 col-sm-12 text-left"> <div class="post"> <div class="mini-widget-thumb"> <a href="http://webinyo.com/?p=23385"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2016/09/Film-izle-HD-Film-izle-150x150.png" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title" style="width: 240px"> <a href="http://webinyo.com/?p=23385"> 2016 Yılı En İyi Filmleri </a> <small>Önceki Makale</small> </div> </div> </li> <li class="next col-md-6 col-sm-12 text-right"> <div class="post"> <div class="mini-widget-thumb"> <a href="http://webinyo.com/sahane-bir-giris-yapan-butonu-ve-paneli.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2016/09/312465.MKmKEJ.f6b9526f-ea23-4f77-b6c0-24852d8f8aa7-150x150.png" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title" style="width: 240px"> <a href="http://webinyo.com/sahane-bir-giris-yapan-butonu-ve-paneli.html"> Şahane Bir Giriş Yapan Butonu ve Paneli </a> <small>Sonraki Makale</small> </div> </div> </li> </ul> </div> <div class="row m22 related-posts"> <div class="col-md-12"> <div class="widget"> <div class="widget-title"> <h4>Benzer Yazılar <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri">Tümünü Görüntüle</a></span></h4> <hr> </div> <div class="review-posts row m30"> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/menu-flitre-menu.html" title="Menü Flitre Menu"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/11/menu-flitre-menu.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/11/menu-flitre-menu.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/11/menu-flitre-menu-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/11/menu-flitre-menu-768x450.jpg 768w" sizes="(max-width: 283px) 100vw, 283px" /> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/menu-flitre-menu.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/menu-flitre-menu.html">Menü Flitre Menu</a></h3> </div> </div> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/uzerine-gelince-haraket-eden-buton-tasarimlari-2.html" title="Üzerine Gelince Haraket Eden Buton Tasarımları 2"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/09/uzerine-gelince-haraket-eden-buton-tasarimlari-2.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/09/uzerine-gelince-haraket-eden-buton-tasarimlari-2.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/09/uzerine-gelince-haraket-eden-buton-tasarimlari-2-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/09/uzerine-gelince-haraket-eden-buton-tasarimlari-2-768x450.jpg 768w" sizes="(max-width: 283px) 100vw, 283px" /> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/uzerine-gelince-haraket-eden-buton-tasarimlari-2.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/uzerine-gelince-haraket-eden-buton-tasarimlari-2.html">Üzerine Gelince Haraket Eden Buton Tasarımları 2</a></h3> </div> </div> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/fullscreen-html5-page-background-video.html" title="Fullscreen HTML5 Page Background Video"> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/fullscreen-html5-page-background-video.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/fullscreen-html5-page-background-video.html">Fullscreen HTML5 Page Background Video</a></h3> </div> </div> </div> <div class="review-posts row m30"> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/uzerine-gelince-haraket-eden-sik-buton-tasarimlari.html" title="Üzerine Gelince Haraket Eden Şık Buton Tasarımları"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/09/11785.wBBLXx.fd4b7fd5-fd6e-459c-a768-83cf17686516.png" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/09/11785.wBBLXx.fd4b7fd5-fd6e-459c-a768-83cf17686516.png 1024w, https://webinyo.com/wp-content/uploads/2016/09/11785.wBBLXx.fd4b7fd5-fd6e-459c-a768-83cf17686516-300x176.png 300w, https://webinyo.com/wp-content/uploads/2016/09/11785.wBBLXx.fd4b7fd5-fd6e-459c-a768-83cf17686516-768x450.png 768w" sizes="(max-width: 283px) 100vw, 283px" /> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/uzerine-gelince-haraket-eden-sik-buton-tasarimlari.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/uzerine-gelince-haraket-eden-sik-buton-tasarimlari.html">Üzerine Gelince Haraket Eden Şık Buton Tasarımları</a></h3> </div> </div> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/toggle-buton-ile-flat-menu-tasarimi.html" title="Toggle Buton ile Flat Menü Tasarımı"> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/toggle-buton-ile-flat-menu-tasarimi.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/toggle-buton-ile-flat-menu-tasarimi.html">Toggle Buton ile Flat Menü Tasarımı</a></h3> </div> </div> <div class="post-review col-md-4 col-sm-12 col-xs-12"> <div class="post-media entry similar-articles"> <a href="https://webinyo.com/jelibonumsuz-buton-tasarimi.html" title="Jelibonumsuz Buton Tasarımı"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/09/jelibonumsuz-buton-tasarimi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/09/jelibonumsuz-buton-tasarimi.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/09/jelibonumsuz-buton-tasarimi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/09/jelibonumsuz-buton-tasarimi-768x450.jpg 768w" sizes="(max-width: 283px) 100vw, 283px" /> </a> <div class="magnifier"> <div class="hover-title-left"> <span><a href="https://webinyo.com/category/web-tasarimlar/hazir-site-bilesenleri" title=""><i class="fa fa-folder-open"></i> Hazır Site Bileşenleri</a></span> </div> <div class="hover-title"> <span><a href="https://webinyo.com/jelibonumsuz-buton-tasarimi.html" title=""><i class="fa fa-comments-o"></i> Yorum Yok</a></span> </div> </div> </div> <div class="post-title"> <h3><a href="https://webinyo.com/jelibonumsuz-buton-tasarimi.html">Jelibonumsuz Buton Tasarımı</a></h3> </div> </div> </div> </div> </div> </div> <div id="comments" class="row"> <div class="col-md-12"> <div class="widget"> <div class="widget-title"> <h4>Konu İle İlgili Soru, Görüş ve Öneriler</h4> <hr> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="widget"> <div class="widget-title"> <h4>Soru, Görüş ve Önerileriniz için Yazın!</h4> <hr> </div> <div class="commentform" id="commentform"> <form class="row" action="https://webinyo.com/wp-comments-post.php" method="post" id="commentform"> <div class="col-md-12 col-sm-12"> <label>Yorumunuz <span class="required">*</span></label> <textarea name="comment" class="form-control" placeholder=""></textarea> </div> <div class="col-md-4 col-sm-12"> <label>İsim Soyisim <span class="required">*</span></label> <input name="author" type="text" class="form-control" placeholder=""> </div> <div class="col-md-4 col-sm-12"> <label>Email <span class="required">*</span></label> <input name="email" type="email" class="form-control" placeholder=""> </div> <div class="col-md-4 col-sm-12"> <label>Website</label> <input name="url" type="text" class="form-control" placeholder=""> </div> <input type="hidden" name="comment_post_ID" value="23388"> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="9c81f5a057" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="81"/></p> <div class="col-md-12 col-sm-12"> <input name="submit" type="submit" value="Gönder" class="btn btn-primary" /> </div> </form> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="widget"> <div class="widget-title"> <h4>Sosyal Medyada Biz</h4> <hr> </div> <div class="social-media-widget m30"> <ul class="list-social clearfix"> <li class="facebook"><a target="_blank" href="https://www.facebook.com/webinyo/"><i class="fa fa-facebook"></i> <small>1.042</small></a></li> <li class="twitter"><a target="_blank" href="https://twitter.com/_webinyo_"><i class="fa fa-twitter"></i> <small>417</small></a></li> <li class="pinterest"><a target="_blank" href="https://www.instagram.com/sdcyazilim/"><i class="fa fa-instagram"></i> <small>3.533</small></a></li> <li class="linkedin"><a target="_blank" href="https://www.linkedin.com/company/18853872/"><i class="fa fa-linkedin"></i> <small>0</small></a></li> <li class="youtube"><a target="_blank" href="https://www.youtube.com/channel/UCCPqWRK_IEDFYcBgn0f7lyw"><i class="fa fa-youtube"></i> <small>7</small></a> <li class="linkedin"><a target="_blank" href="https://www.dailymotion.com/webinyonoktacom"><i class="fa fa-vimeo"></i> <small>0</small></a></li> </li> </ul> </div> </div>  <div class="widget hidden-xs"> <div class="ads-widget m30"> <a target="_blank" href="http://irl.iyte.edu.tr/"><img style="width: 300px;height: 600px" src="https://webinyo.com/resimler/iztech.png"></a> </div> </div> <div class="widget"> <div class="widget-title"> <h4>En Çok Okunan Yazılar</h4> <hr> </div> <div class="mini-widget carrier-widget m30"> <div class="post clearfix"> <div class="mini-widget-thumb"> <a href="https://webinyo.com/eatlon-web-site-tasarimi.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2017/05/treatlon-web-site-tasarimieneatlon-web-template-150x150.jpg" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title"> <a href="https://webinyo.com/eatlon-web-site-tasarimi.html"> Eatlon Web Site Tasarımı</a> <span>235.118 Görüntülenme</span> </div> </div> <div class="post clearfix"> <div class="mini-widget-thumb"> <a href="https://webinyo.com/wordpress-login-sayfasi-adresi-degistirme-guvenlik-eklentisi-rename-wp-login-php.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2015/08/wordpressEklentiler-150x150.png" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title"> <a href="https://webinyo.com/wordpress-login-sayfasi-adresi-degistirme-guvenlik-eklentisi-rename-wp-login-php.html"> WordPress Login Sayfası Adresi Değiştirme Güvenlik </a> <span>192.634 Görüntülenme</span> </div> </div> <div class="post clearfix"> <div class="mini-widget-thumb"> <a href="https://webinyo.com/single-2-mingle-web-site-tasarimi.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2017/05/trsingle-2-mingle-web-site-tasarimiensingle-2-mingle-web-template-150x150.jpg" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title"> <a href="https://webinyo.com/single-2-mingle-web-site-tasarimi.html"> Single 2 Mingle Web Site Tasarımı</a> <span>77.371 Görüntülenme</span> </div> </div> <div class="post clearfix"> <div class="mini-widget-thumb"> <a href="https://webinyo.com/otomatik-gecisli-slider-yapimi.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2016/12/otomatik-gecisli-slider-yapimi-150x150.png" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title"> <a href="https://webinyo.com/otomatik-gecisli-slider-yapimi.html"> Otomatik Geçişli Slider Yapımı</a> <span>41.030 Görüntülenme</span> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-12 col-xs-12"> <div class="widget"> <div class="widget-title"> <h4>Dost Siteler</h4> <hr> </div> <div class="links-widget m30"> <ul class="check"> <li><a target="_blank" href="https://dio.com.tr">Dio Yazılım</a></li> <li><a target="_blank" href="https://mymp3x.com/">Mp3 Download</a></li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-12 col-xs-12"> <div class="widget"> <div class="widget-title"> <h4>Sayfalar</h4> <hr> </div> <div class="links-widget m30"> <ul class="check"> <li><a href="https://webinyo.com">Anasayfa</a></li> <li><a href="http://webinyo.com/iletisim">İletişim</a></li> <li><a href="#">Kullanım Sözleşmesi</a></li> <li><a href="#">Mesafeli Satış Sözleşmesi</a></li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-12 col-xs-12"> <div class="widget"> <div class="widget-title"> <h4>Sosyal Medya</h4> <hr> </div> <div class="links-widget m30"> <ul class="sociallinks"> <li><a target="_blank" href="https://www.facebook.com/webinyo/"><i class="fa fa-facebook"></i> Facebook</a></li> <li><a target="_blank" href="https://twitter.com/_webinyo_"><i class="fa fa-twitter"></i> Twitter</a></li> <li><a target="_blank" href="https://www.instagram.com/sdcyazilim/"><i class="fa fa-instagram"></i> Instagram</a></li> <li><a target="_blank" href="https://www.linkedin.com/company/18853872"><i class="fa fa-linkedin"></i> linkedin</a></li> <li><a target="_blank" href="https://www.dailymotion.com/webinyonoktacom"><i class="fa fa-vimeo"></i> Vimeo</a></li> <li><a target="_blank" href="https://www.youtube.com/channel/UCCPqWRK_IEDFYcBgn0f7lyw"><i class="fa fa-youtube"></i> YouTube</a></li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-12 col-xs-12"> <div class="widget"> <div class="widget-title"> <h4>Eposta Abonesi</h4> <hr> </div> <div class="newsletter-widget m30"> <p>Eposta bültenimize abone olun yayınlanan haber ve yazılar mail adresinize gelsin.</p> <form class="form-inline" method="post" role="form"> <div class="input-group form-group"> <input type="text" name="email" placeholder="Add your email here.." required class="form-control" /> </div> <input type="submit" value="Subscribe" class="btn btn-primary" /> </form> <hr> <h3> <span>0 Üye</span> <span>0 İçerik </span> </h3> </div> </div> </div> </div> </div> </footer> <div id="sitefooter-wrap"> <div id="sitefooter" class="container"> <div id="copyright" class="row"> <div class="col-md-6 col-sm-12 text-left"> <p class="copyright-notice"><span class="fa fa-copyright"></span> 2013 SDC Yazılım. All Rights Reserved. A <a href="https://sdcyazilim.com" title="SDC Yazılım" target="_blank">SDC Yazılım</a></p> </div> <div class="col-md-6 col-sm-12"> <ul class="list-inline text-right"> <li><a href="https://webinyo.com">Anasayfa</a></li> <li><a href="http://webinyo.com/iletisim">İletişim</a></li> <li><a class="topbutton" href="#">Back to top <i class="fa fa-angle-up"></i></a></li> </ul> </div> </div> </div> </div> </div> <script src="https://webinyo.com/wp-content/themes/deneme/js/jquery.min.js"></script> <script src="https://webinyo.com/wp-content/themes/deneme/js/bootstrap.js"></script> <script type="text/javascript"> $(function(){ $(document).one('click', '.like', function(e) { var id = $('.like').attr('data-id'); $(this).html('<i class="fa fa-thumbs-up" aria-hidden="true"></i> Beğen'); $(this).children('.fa-thumbs-up').addClass('animate-like'); $.ajax({url: "like/" + id, success: function(result){ $("#like").html('<i class="fa fa-thumbs-up" aria-hidden="true"></i> ' + result + ' Like'); }}); }); }); </script> <script type="text/javascript"> function progress(timeleft, timetotal, $element) { var progressBarWidth = timeleft * $element.width() / timetotal; $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60); if(timeleft > 0) { setTimeout(function() { progress(timeleft - 1, timetotal, $element); }, 1000); }else{ var elem = document.getElementById("postButton"); document.getElementById("postButton").style.display = "block"; document.getElementById("postWait").style.display = "none"; document.getElementById("progressBar").style.display = "none"; } }; progress(15, 15, $('#progressBar')); </script> <script> $( document ).ready(function() { $('.EnlighterJSInfoButton').hide(); }); </script> <script type="text/javascript"> if (!user) { $('[pd-popup="popupNew"]').fadeIn(100); } $(function() { $('[pd-popup-close]').on('click', function(e) { var targeted_popup_class = jQuery(this).attr('pd-popup-close'); $('[pd-popup="' + targeted_popup_class + '"]').fadeOut(200); e.preventDefault(); }); }); </script> <script> (function(w,d,o,g,r,a,m){ d.write('<div id="'+(cid=(Math.random()*1e17).toString(36))+'"></div>'); w[r]=w[r]||function(){(w[r+'l']=w[r+'l']||[]).push(arguments)}; function e(b,w,r){if(w[r+'h']=b.pop()){ a=d.createElement(o),p=d.getElementsByTagName(o)[0];a.async=1; a.src='//cdn.'+w[r+'h']+'/libs/b.js';a.onerror=function(){e(g,w,r)};p.parentNode.insertBefore(a,p) }}if(!w.ABN){e(g,w,r)};w[r](cid,{id:1354036518}) })(window,document,'script',['ftd.agency'],'ABNS'); </script> <script type="text/javascript">(function(i,m,p,a,c,t){c.ire_o=p;c[p]=c[p]||function(){(c[p].a=c[p].a||[]).push(arguments)};t=a.createElement(m);var z=a.getElementsByTagName(m)[0];t.async=1;t.src=i;z.parentNode.insertBefore(t,z)})('//d.impactradius-event.com/P-A2034822-600b-4042-aa4b-df1f6e8931a41.js','script','impactStat',document,window);impactStat('transformLinks');impactStat('trackImpression');</script> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/webinyo.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://webinyo.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.7'></script> <script type='text/javascript' src='https://webinyo.com/wp-includes/js/wp-embed.min.js?ver=4.9.16'></script> <script async="async" type='text/javascript' src='https://webinyo.com/wp-content/plugins/akismet/_inc/form.js?ver=4.1.7'></script> </body> </html>