Cara Menciptakan Tombol Download Animated Curl

Animated Curl Buttons - Berbicara banyak mengenai tombol download , akan banyak sekali banyak sekali macam tampilan yang menarik dan mimiliki effect yang menarik pula . Seperti yang akan kita tampilkan pada Animated Curl Buttons dengan mempunyai effect hover dan lipat disisi tombol .

Demo

Bagi Anda yang ingin memasangnya berikut ini langkah-langkahnya :

Pertam-pama anda buka Editor Template , lalu Anda cari isyarat ]]></b:skin> dan salin isyarat dibawah ini pastekan diatasnya atau sebelumnya .

.col {
    display: inline-block;
    *display: inline; 
    zoom: 1;
    vertical-align: top;
}

div.white{
 background: #F4F5F0;
}

div.dark-grey{
 background: #4C4D4B;
}

div.green{
 background: #5CB86E;
}

.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
  color: #666666;
  border: 2px #666666 solid;
  outline: none;
}

button:hover{
 color: #ffffff;
 background-color: #666666;
}

.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
 background-color: #9b59b6;
}

.orange {
 color: #e67e22;
 border: 2px #e67e22 solid;
}

.orange:hover {
 background-color: #e67e22;
}

.yellow {
 color: #f1c40f;
 border: 2px #f1c40f solid;
}

.yellow:hover {
 background-color: #f1c40f;
}

.twitter{
 color: #00aced;
 border: 2px solid#00aced;
}
.twitter:hover{
 background-color: #00aced;
}
.facebook{
 color: #3b5998;
 border: 2px solid #3b5998;
}
.facebook:hover{
 background-color: #3b5998;
}
.google{
 color: #dd4b39;
 border: 2px solid #dd4b39;
}
.google:hover{
 background-color: #dd4b39;
}
.pinterest{
 color: #cb2027;
 border: 2px solid #cb2027;
}
.pinterest:hover{
 background-color: #cb2027;
}
.linkedin{
 color: #007bb6;
 border: 2px solid #007bb6;
}
.linkedin:hover{
 background-color: #007bb6;
}
.youtube{
 color: #bb0000;
 border: 2px solid #bb0000;
}
.youtube:hover{
 background-color: #bb0000;
}
.vimeo{
 color: #aad450;
 border: 2px solid #aad450;
}
.vimeo:hover{
 background-color: #aad450;
}
.tumblr{
 color: #32506d;
 border: 2px solid #32506d;
}
.tumblr:hover{
 background-color: #32506d;
}
.instagram{
 color: #517fa4;
 border: 2px solid #517fa4;
}
.instagram:hover{
 background-color: #517fa4;
}
.flickr{
 color: #ff0084;
 border: 2px solid #ff0084;
}
.flickr:hover{
 background-color: #ff0084;
}
.dribbble{
 color: #ea4c89;
 border: 2px solid #ea4c89;
}
.dribbble:hover{
 background-color: #ea4c89;
}
.quora{
 color: #a82400;
 border: 2px solid #a82400;
}
.quora:hover{
 background-color: #a82400;
}
.foursquare{
 color: #0072b1;
 border: 2px solid #0072b1;
}
.foursquare:hover{
 background-color: #0072b1;
}
.forrst{
 color: #5B9A68;
 border: 2px solid #5B9A68;
}
.forrst:hover{
 background-color: #5B9A68;
}
.vk{
 color: #45668e;
 border: 2px solid #45668e;
}
.vk:hover{
 background-color: #45668e;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */
.curl-top-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.curl-top-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before {
  width: 25px;
  height: 25px;
}

.ripple {
  position: absolute;
  background: rgba(0,0,0,.25);
  border-radius: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  pointer-events: none;
}

.ripple.show {
  -webkit-animation: ripple .5s ease-out;
  animation: ripple .5s ease-out;
}
@-webkit-keyframes
ripple { to {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 opacity: 0;
}
}
@keyframes
ripple { to {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 opacity: 0;
}
}


@media (luminosity: normal) {
    body {
        background: #f5f5f5;
        color: #262626;
    }
}
@media (luminosity: dim) {
    body {
        background: #e9e4e3;
    }
}
@media (luminosity: washed) {
    body {
        background: #ffffff;
    }
}

Selanjutnya Anda salin isyarat dibawah ini dan pastekan pada entri gres Mode HTML .

<div class="col-1">
   <button class="curl-top-left facebook">curl-top-left</button>
   <button class="curl-top-right google">curl-top-right</button>
   <button class="curl-bottom-right vimeo">curl-bottom-right</button>
   <button class="curl-bottom-left yahoo">curl-bottom-left</button>
  </div>

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/