Materyal Tasarım Ön İzleme ve İndirme Butonları

Materyal Tasarım Ön İzleme ve İndirme Butonları - Blog sitelerinde Google ürünlerinin kullanıdığını zaten biliyorsunuz. Şimdi bu ürünlerden faydalanarak hazırlanan sayısız faydalı özelliklerinin yanı sıra çekici tasarımı ile büyük ilgi görmeye başladı.

Bu tasarıma sahip olan ön izleme ve indirme butonlarına dalgalanma animasyon efektleri de ilave edilerek muhteşem bir görünüme sahip oldu. Butonlara tıklandığında dalgalanma animasyon efekleri görünmektedir.

Materyal Tasarımlı Ön İzleme ve İndirme Butonları Edinin

1- Materyal Tasarımlı blog butonlarını eklemek için, blogunuzun kumanda panelinden Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

/* Materyal Tasarımlı Butonlar */
#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)}}

Buton renk fonksiyonlarını değiştirmek için yukarıdaki CSS kodu içerisinden renk kodlarını değiştirebilirsiniz.

2- CSS kodlarını ekledikten sonra aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<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>

jQuery kodu butonlara dalgalanma animasyon efektleri görünümü sağlamaktadır.

3- Materyal Tasarımlı ön izleme ve indirme butonlarını blog yayınlarında kullanmak için, aşağıdaki HTML kodları kullanmalısınız. Buton kodlarını yayınlarınızı oluştururken HTML bölümden eklemeyi unutmayın.

<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>

HTML kod içerisinde yer alan (#) yerine hedef bağlantılarınızı ekleyin.

Ön İzleme

Materyal Tasarımlı ön izleme ve indirme butonlarını blogunuza eklemiş oldunuz. Böylece blogunuz muhteşem animasyonlu efektli ön izleme ve indirme butonlarına sahip oldu.