× İletişim Formu Materyal Tasarım Ön İzleme ve İndirme Butonları TRT Çocuk Çizgi Filmleri 2/15/2017 Etiketler : Blogger Buton TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <style> /* Materyal Tasarımlı Butonlar */ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30vh auto 0 auto; } #group-btn{margin:20px auto;text-align:center} #group-btn a{text-decoration:none} .btnroll{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s} .btnroll:hover,.btnroll:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)} .btnroll.tsatu{background:#e67e22} .btnroll.tdua{background:#3498db} .btnroll.tsatu:hover,.btnroll.tsatu:active{background:#f49541} .btnroll.tdua:hover,.btnroll.tdua:active{background:#4aaff3} svg{position:absolute;top:0;left:0;width:100%;height:100%} circle{fill:rgba(255,255,255,0.07)} .roll-efekt{position:relative;overflow:hidden;-webkit-transform:translatez(0)} .tefekt{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5} .tefekt.animate{animation:roll-efekt 0.5s linear} @keyframes roll-efekt{100%{opacity:0;transform:scale(2.5)}} @-webkit-keyframes roll-efekt{100%{opacity:0;transform:scale(2.5)}} </style> </head> <body> <div id="group-btn"> <a class="btnroll tsatu roll-efekt" href="#" rel="nofollow" target="_blank">Ön İzleme</a> <a class="btnroll tdua roll-efekt" href="#" rel="nofollow" target="_blank">İndir</a> </div> <script type='text/javascript'> //<![CDATA[ !function(a){a(".roll-efekt").click(function(b){var c=a(this);0===c.find(".tefekt").length&&c.append("<span class='tefekt'></span>");var d=c.find(".tefekt");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery); //]]> </script> </body> </html> YENİ YAYIN İlk "Materyal Tasarım Ön İzleme ve İndirme Butonları" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Materyal Tasarım Ön İzleme ve İndirme Butonları TRT Çocuk Çizgi Filmleri 2/15/2017 Etiketler : Blogger Buton TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <style> /* Materyal Tasarımlı Butonlar */ @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30vh auto 0 auto; } #group-btn{margin:20px auto;text-align:center} #group-btn a{text-decoration:none} .btnroll{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s} .btnroll:hover,.btnroll:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)} .btnroll.tsatu{background:#e67e22} .btnroll.tdua{background:#3498db} .btnroll.tsatu:hover,.btnroll.tsatu:active{background:#f49541} .btnroll.tdua:hover,.btnroll.tdua:active{background:#4aaff3} svg{position:absolute;top:0;left:0;width:100%;height:100%} circle{fill:rgba(255,255,255,0.07)} .roll-efekt{position:relative;overflow:hidden;-webkit-transform:translatez(0)} .tefekt{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5} .tefekt.animate{animation:roll-efekt 0.5s linear} @keyframes roll-efekt{100%{opacity:0;transform:scale(2.5)}} @-webkit-keyframes roll-efekt{100%{opacity:0;transform:scale(2.5)}} </style> </head> <body> <div id="group-btn"> <a class="btnroll tsatu roll-efekt" href="#" rel="nofollow" target="_blank">Ön İzleme</a> <a class="btnroll tdua roll-efekt" href="#" rel="nofollow" target="_blank">İndir</a> </div> <script type='text/javascript'> //<![CDATA[ !function(a){a(".roll-efekt").click(function(b){var c=a(this);0===c.find(".tefekt").length&&c.append("<span class='tefekt'></span>");var d=c.find(".tefekt");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery); //]]> </script> </body> </html>
Yorum Gönder