Hareketli Demo ve Download Butonu Oluşturma

 Blog sayfalarında buton ekleyerek paylaşımda bulunan arkadaşlar için güzel bir yöntem. Özellikle tema gibi demo download bağlantılarında kullanılabilir. Bu tasarım animasyon efektleri ile dikkat çekici ve şık bir görünüme sahiptir. Bu butonlar herhangi bir aşamada ve bilgi için kullanılabilir. Yazınıza vereceğiniz linkte bile butonları kullanmak ayrı bir hava katacaktır. Daha profesyonel ve kullanışlı bir blog sayfasına sahip olmak istiyorsanız vereceğim iki farklı yöntemi uygulayabilirsiniz. Hareketli butonları oluşturmak için yapmanız gereken basit bir kaç adımı yerine getirmek.

1.Yöntem:

Demo Download Butonu Nasıl Eklenir?

 Butonları blog sayfanıza uygulamak için Tema> HTML Düzenle üzerinden ]]></b:skin> kodunun bir satır üzerine aşağıdaki kodu ekleyin.

/* Materyal Tasarımlı Butonlar */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{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}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Sonraki işlemde aşağıdaki jQuery kodunu </body> kodunun üzerine ekleyin ve kaydedin.

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");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>

 Kod ekleme işlemi bittikten sonra artık yapmanız gereken tek şey paylaşacağınız url adreslerini aşağıdaki alana ekleyerek butonu oluşturmaktır. Yazı alanında HTML sekmesindeyken aşağıdaki kodu kullanabilirsiniz.

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

2. Yöntem:

 Yukarıdaki demo(önizleme) ve download(indir) butonlarını yazılarına uygulamak için Tema kod alanınızda ]]></b:skin> kodunun üst satırına aşağıdaki kodu ekliyoruz ve kaydediyoruz.

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Artık butonları yazı alanımızda istediğimiz bir yerde kullanmak için aşağıdaki kod yönteminden faydalanıyoruz. Sadece demo efektli butonu kullanmak için aşağıdaki koda link veriyoruz.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Buraya Tıkla</span>
</a>
</div>

Eğer sadece download efektli butonu kullanmak istiyorsanız aşağıdaki kod yönteminden faydalanıyoruz.

<div id="wrap">
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Buraya Tıkla</span>
</a>
</div>

İki butonu da aynı anda kullanmak istiyorum diyorsanız aşağıdaki kodu kullanmanız yeterli.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Buraya Tıkla</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Buraya Tıkla</span>
</a>
</div>

 İki demo ve download butonu için link verirken # işaretli alanı değiştirmeniz gerekiyor. Kod içinde demo ve download yazan yerleri istediğiniz gibi değiştirebilirsiniz. İkinci buton örneğinde üzerine geldiğinde "Buraya Tıkla" yazan yere istediğiniz bilgiyi girebilirsiniz.

Kaynak: Blogger Eklentileri

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵