Google Materyal Buton Tasarımı

Savaş Dersim Çelik | Perşembe Eylül 29th, 2016 | Yorum Yok | 1.276 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/materyal-giris-sayfasi-tasarimi.html" title="Materyal Giriş Sayfası Tasarımı"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/10/material-giris-saifasi-tasarimi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/10/material-giris-saifasi-tasarimi.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/10/material-giris-saifasi-tasarimi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/10/material-giris-saifasi-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/materyal-giris-sayfasi-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/materyal-giris-sayfasi-tasarimi.html">Materyal Giriş Sayfası 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/giris-sayfasi-tasarimi.html" title="Giriş Sayfası Tasarımı"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/10/giris-saifasi-tasarimi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/10/giris-saifasi-tasarimi.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/10/giris-saifasi-tasarimi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/10/giris-saifasi-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/giris-sayfasi-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/giris-sayfasi-tasarimi.html">Giriş Sayfası 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/haraketli-giris-sayfasi-tasarimi.html" title="Haraketli Giriş Sayfası Tasarımı"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/10/haraketli-giris-saifasi-tasarimi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/10/haraketli-giris-saifasi-tasarimi.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/10/haraketli-giris-saifasi-tasarimi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/10/haraketli-giris-saifasi-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/haraketli-giris-sayfasi-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/haraketli-giris-sayfasi-tasarimi.html">Haraketli Giriş Sayfası Tasarımı</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/gizli-twitter-takip-et-buton-tasarimi.html" title="Gizli Twitter Takip Et Buton Tasarımı"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/09/gizli-twitter-takip-et-buton-tasarimi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/09/gizli-twitter-takip-et-buton-tasarimi.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/09/gizli-twitter-takip-et-buton-tasarimi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/09/gizli-twitter-takip-et-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/gizli-twitter-takip-et-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/gizli-twitter-takip-et-buton-tasarimi.html">Gizli Twitter Takip Et Buton 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/css-only-muzik-player-elementi.html" title="CSS only Müzik Player Elementi"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2017/01/css-onli-muzik-plaier-elementi.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2017/01/css-onli-muzik-plaier-elementi.jpg 1024w, https://webinyo.com/wp-content/uploads/2017/01/css-onli-muzik-plaier-elementi-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2017/01/css-onli-muzik-plaier-elementi-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/css-only-muzik-player-elementi.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/css-only-muzik-player-elementi.html">CSS only Müzik Player Elementi</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/html5-form-dogrulama-tum-hata-mesajlari-gosterir.html" title="HTML5 Form Doğrulama – Tüm Hata Mesajları gösterir"> <img width="283" height="166" src="https://webinyo.com/wp-content/uploads/2016/10/html5-form-dogrulama-tum-hata-mesajlari-gosterir.jpg" class="attachment-288x166 size-288x166 wp-post-image" alt="" srcset="https://webinyo.com/wp-content/uploads/2016/10/html5-form-dogrulama-tum-hata-mesajlari-gosterir.jpg 1024w, https://webinyo.com/wp-content/uploads/2016/10/html5-form-dogrulama-tum-hata-mesajlari-gosterir-300x176.jpg 300w, https://webinyo.com/wp-content/uploads/2016/10/html5-form-dogrulama-tum-hata-mesajlari-gosterir-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/html5-form-dogrulama-tum-hata-mesajlari-gosterir.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/html5-form-dogrulama-tum-hata-mesajlari-gosterir.html">HTML5 Form Doğrulama – Tüm Hata Mesajları gösterir</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="87ff1ae875" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="172"/></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>151.257 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>142.647 Görüntülenme</span> </div> </div> <div class="post clearfix"> <div class="mini-widget-thumb"> <a href="https://webinyo.com/wordpress-iddaa-canli-mac-sonuclari-eklentisi.html"> <img width="80" height="80" src="https://webinyo.com/wp-content/uploads/2017/05/wordpress-iddaa-canli-mac-sonuclari-eklentisi-150x150.png" class="attachment-80x80 size-80x80 wp-post-image" alt="" /> </a> </div> <div class="mini-widget-title"> <a href="https://webinyo.com/wordpress-iddaa-canli-mac-sonuclari-eklentisi.html"> WordPress İddaa Canlı Maç Sonuçları Eklentisi</a> <span>32.680 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>31.247 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 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.6'></script> <script type='text/javascript' src='https://webinyo.com/wp-includes/js/wp-embed.min.js?ver=4.9.13'></script> <script async="async" type='text/javascript' src='https://webinyo.com/wp-content/plugins/akismet/_inc/form.js?ver=4.1.3'></script> </body> </html>