* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 2%;
    text-align: center;
}

.btn-hover {
    width: 60px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 5px;
    height: 75px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 5px;
    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);
}

.bt-red {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: red;
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: red;
 background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.bt-red:hover, .bt-red:focus {
  background: #ff1a1a;
  background-color: #e60000;
  background-image: linear-gradient(50deg,#e60000, #fc00a8);
  outline: none;
}
.bt-red:active {
  background: #f20000;
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.bt-blue {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: blue;
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: blue;
      background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.bt-blue:hover, .bt-blue:focus {
  background: #1a1aff;
  background-color: #0000e6;
  background-image: linear-gradient(50deg,#0000e6, #00a8fc);
  outline: none;
}
.bt-blue:active {
  background: #0000f2;
  background-color: #0000d9;
  background-image: linear-gradient(50deg,#0000d9, #009fee);
}

.bt-green {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: green;
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: green;
  background-image: linear-gradient(50deg,green, #6fa600);
  transition: box-shadow 100ms ease-out;
}
.bt-green:hover, .bt-green:focus {
  background: #00a600;
  background-color: #007300;
  background-image: linear-gradient(50deg,#007300, #649600);
  outline: none;
}
.bt-green:active {
  background: #007a00;
  background-color: #006d00;
  background-image: linear-gradient(50deg,#006d00, #5e8d00);
}

.bt-purple {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: purple;
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: purple;
  background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.bt-purple:hover, .bt-purple:focus {
  background: #a600a6;
  background-color: #730073;
  background-image: linear-gradient(50deg,#730073, #320096);
  outline: none;
}
.bt-purple:active {
  background: #7a007a;
  background-color: #6d006d;
  background-image: linear-gradient(50deg,#6d006d, #2f008d);
}

.bt-orange {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: orange;
  border: none;
  border-radius: 4px;
  color: white;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: orange;
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.bt-orange:hover, .bt-orange:focus {
  background: #00a600;
  background-color: #007300;
  background-image: linear-gradient(50deg,#007300, #649600);
  outline: none;
}
.bt-orange:active {
  background: #007a00;
  background-color: #006d00;
  background-image: linear-gradient(50deg,#006d00, #5e8d00);
}
.bt-custom {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: orange;
  border: none;
  border-radius: 4px;
  color: navy;
  display: inline-block;
  padding: 0px;
  text-decoration: none;
  background-color: orange;
  background-image: linear-gradient(50deg,orange, cyan);
  transition: box-shadow 100ms ease-out;
}
.bt-custom:hover, .bt-custom:focus {
  background: #ffae1a;
  background-color: #e69500;
  background-image: linear-gradient(50deg,#e69500, #00e6e6);
  outline: none;
}
.bt-custom:active {
  background: #f29d00;
  background-color: #d98c00;
  background-image: linear-gradient(50deg,#d98c00, #00d9d9);
}

.wrap {

  left: 50%;
  position: relative;
  text-align: center;
  top:40%;
  transform: translate(-50%, -50%);
}
.wrap p {
  margin-bottom: 2em;

}