.button1 a {
  min-width:150px;
  position: relative;
  display: inline-block;
  padding: 0.625em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: white;
  font-size:16px;
  font-family: 'Roboto', Sans-Serif; 
}

.button a:hover {color:#fff !important;}
.button2 a:hover {color:#fff !important;}
.button3 a:hover {color:#fff !important;}

.button1 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #008265, #003e7e);
  border-radius: 0;
  transition: box-shadow .5s ease, -webkit-transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease, -webkit-transform .2s ease;
  will-change: transform;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
}
.button1 a:hover::before {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.button1 a::after {
  position: relative;
  display: inline-block;
  content: attr(data-title);
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  font-weight: bold;
  letter-spacing: .01em;
  will-change: transform;
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
}


.button2 a {
   min-width:150px;
  position: relative;
  display: inline-block;
  padding: 0.625em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: white;
  font-size:16px;
  font-family: 'Roboto', Sans-Serif; 
}
.button2 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
background: linear-gradient(1deg,#004283,#3a6fb7) !important;
  border-radius: 0;
  transition: box-shadow .5s ease, -webkit-transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease, -webkit-transform .2s ease;
  will-change: transform;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
}


.button2 a:hover::before {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.button2 a::after {
  position: relative;
  display: inline-block;
  content: attr(data-title);
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  font-weight: bold;
  letter-spacing: .01em;
  will-change: transform;
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
}


.button3 a {
  
  width:150px;
  position: relative;
  display: inline-block;
  padding: 0.625em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: white;
  font-size:16px;
  font-family: 'Roboto', Sans-Serif; 
}
.button3 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: linear-gradient(1deg,#008265,#42ccb1); 
  border-radius: 0px;
  transition: box-shadow .5s ease, -webkit-transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease;
  transition: box-shadow .5s ease, transform .2s ease, -webkit-transform .2s ease;
  will-change: transform;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
}
.button3 a:hover::before {
  {# box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); #}
  box-shadow:none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#39ab97+0,1f8374+100 */
background: #39ab97; /* Old browsers */
background: -moz-linear-gradient(top, hsla(169,50%,45%,1) 0%, hsla(171,62%,32%,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, hsla(169,50%,45%,1) 0%,hsla(171,62%,32%,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, hsla(169,50%,45%,1) 0%,hsla(171,62%,32%,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39ab97', endColorstr='#1f8374',GradientType=0 ); /* IE6-9 */
}
.button3 a::after {
  position: relative;
  display: inline-block;
  content: attr(data-title);
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  font-weight: bold;
  letter-spacing: .01em;
  will-change: transform;
  -webkit-transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
          transform: translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
}



.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */