1.Buttons = Style -1

Button 1 Button 2 Button 3 Button 4

2.Buttons = Style -2

Download

click to begin

1.2MB .zip

3.Buttons = Style -3

We will Add More Buttons Soon

Codes For Button

For Button Style-1

                           ///----Css ----///
 .grdt-btn-kk {
    margin: 10px;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 20px;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
    display: inline-block;
    border-radius: 25px;
text-decoration: none;
}
.grdt-btn-kk:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    margin: 8px 10px 12px;text-decoration: none;}
.grdt-btn-kk-1 {background-image: linear-gradient(to right, #DD5E89 0%, #F7BB97 51%, #DD5E89 100%);text-decoration: none;}
.grdt-btn-kk-1:hover { background-position: right center;text-decoration: none;}

.grdt-btn-kk-2 {background-image: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%)}
.grdt-btn-kk-2:hover { background-position: right center; }

.grdt-btn-kk-3 {background-image: linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%)}
.grdt-btn-kk-3:hover { background-position: right center; }

.grdt-btn-kk-4 {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%)}
.grdt-btn-kk-4:hover { background-position: right center; }.info-btn {
margin: 50px auto;
width: 200px;
}

                      //---Html----//<a class="grdt-btn-kk grdt-btn-kk-1" href="/">Button 1 </a>
<a class="grdt-btn-kk grdt-btn-kk-2" href="/">Button 2 </a>
<a class="grdt-btn-kk grdt-btn-kk-3" href="/">Button 3 </a>
<a class="grdt-btn-kk grdt-btn-kk-4" href="/">Button 4 </a>

For Button Style-2

                           ///----Css ----///
 
.info-btn a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
display: block;
font: 17px/50px Helvetica,Verdana,sans-serif;
height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;

/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;

/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.info-btn a, .abt-button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.info-btn p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;

}
.info-btn:hover .up {
margin: -5px 0 0 10px !important;
}
.info-btn:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.info-btn a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}
.info-btn:active .up {
margin: -20px 0 0 10px !important;
}
.info-btn:active .down {
margin: -70px 0 0 10px !important;
}

                      //---Html----//<div class="info-btn">
      <a href="#" target="”blank”">Download</a>
  <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
         </div>

For Button Style-3

                           ///----Css ----///
 
 .buttons {
      margin: 10%;
      text-align: center;
  }

  .btn-hover {
      width: 200px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      margin: 20px;
      height: 55px;
      text-align:center;
      border: none;
      background-size: 300% 100%;

      border-radius: 50px;
      -moz-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      -webkit-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
  }

  .btn-hover:hover {
      background-position: 100% 0;
      -moz-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      -webkit-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
  }

  .btn-hover:focus {
      outline: none;
  }

  .btn-hover.color-1 {
      background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
      box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  }
  .btn-hover.color-2 {
      background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
      box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
  }
  .btn-hover.color-3 {
      background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
      box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
  }
  .btn-hover.color-4 {
      background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
      box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
  }
  .btn-hover.color-5 {
      background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
      box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
  }
  .btn-hover.color-6 {
      background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
      box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
  }
  .btn-hover.color-7 {
      background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
      box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
  }
  .btn-hover.color-8 {
      background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
      box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
  }
  .btn-hover.color-9 {
      background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
      box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
  }
  .btn-hover.color-10 {
          background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
      box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
  }
  .btn-hover.color-11 {
         background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
  }

                      //---Html----//<div class="buttons">
  <button class="btn-hover color-1">BUTTON</button>
  <button class="btn-hover color-2">BUTTON</button>
  <button class="btn-hover color-3">BUTTON</button>
  <button class="btn-hover color-4">BUTTON</button>
  <button class="btn-hover color-5">BUTTON</button>
  <button class="btn-hover color-6">BUTTON</button>
  <button class="btn-hover color-7">BUTTON</button>
  <button class="btn-hover color-8">BUTTON</button>
  <button class="btn-hover color-9">BUTTON</button>
  <button class="btn-hover color-10">BUTTON</button>
  <button class="btn-hover color-11">BUTTON</button>
</div>