Cara membuat tombol demo dan download keren dari arlina design

Berikut cara membuat tombol demo dan download keren dari arlina design yang responsive untuk di pasang di postingan blog sobat,sehingga otomatis menyesuaikan dengan tempate blog anda.
1.Style dem download slide

Css

<style type="text/css">
#wrap {
    margin: 20px auto;
    text-align: center;
}

.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;
}
</style>

Silahkan tauruh css tersebut sebelum </style> atau ]]></b:skin>

Js

<script type='text/javascript'>
//<![CDATA[
// Pure CSS
//]]>
</script>

Slahkan tauruh js tersebut sebelum </head>

Kemudian masukan code html berikut untuk membuat menu demo dan downloadnya.

<div id="wrap">
<a href="#" class="btn-slide">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Demo

Demo
Click here



Download
Click here

2.Demo download standar

Css:

<style type='text/css'>
#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: 0px 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);
  }
}
</style>

Js:

<script type='text/javascript'>
//<![CDATA[
(function($) {
    $(".ripple-effect").click(function(e){
        var rippler = $(this);
        if(rippler.find(".teffect").length === 0) {
            rippler.append("<span class='teffect'></span>");
        }
        var teffect = rippler.find(".teffect");
        teffect.removeClass("animate");
        if(!teffect.height() && !teffect.width())
        {
            var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
            teffect.css({height: d, width: d});
        }
        var x = e.pageX - rippler.offset().left - teffect.width()/2;
        var y = e.pageY - rippler.offset().top - teffect.height()/2;
        teffect.css({
            top: y+'px',
            left:x+'px'
        }).addClass("animate");
    })
})(jQuery);
//]]>
</script>

HTML

<div id='wrap'>
  <a class='tombolripple tsatu ripple-effect' href='#0'>Demo</a>
  <a class='tombolripple tdua ripple-effect' href='#0'>Download</a>
</div>

Demo

code from: http://www.arlinadzgn.com/2014/12/memasang-slide-demo-dan-download-button.html