Template:Home/Login/styles.css

.ButtonGradient {
            padding: 10px 15px;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
            border-radius: 8px;
            display: block;
            text-decoration: none;
}
.ButtonGradient-container {
            display: block;
            white-space: nowrap;
}
.ButtonGradient-container a:hover{
            text-decoration: none;
}
.ButtonGradient-container a:active{
            text-decoration: none;
}
.large {padding: 20px 15px;}

          .login {
            background-image: linear-gradient(to right, #1A2980 0%, #26D0CE  51%, #1A2980  100%);
            text-decoration: none;
          }

.skin-citizen-dark .login {
  background-image: linear-gradient(to right,#1B1658 0%,#24C6C5 51%,#1B1658 100%) !important;
}
          .login:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
            text-decoration: none;
          }
          .request {
            background-image: linear-gradient(to right, #FF8008 0%, #FFC837  51%, #FF8008  100%);
            text-decoration: none;
          }
.skin-citizen-dark .request {
  background-image: linear-gradient(to right,#BC2B09 0%,#EBBD46 51%,#BC2B09 100%) !important;
}
          .request:hover {
            background-position: right center; /* change the direction of the change here */
            text-decoration: none;
            color: #fff;
            text-decoration: none;
          }

          .pink {
            background-image: linear-gradient(to right,#CC076D 0%,#FF92DF 51%,#CC076D 100%);
            text-decoration: none;
            text-shadow: -1px -1px 2px #bf326b, 1px -1px 2px #bf326b, -1px 1px 2px #bf326b, 1px 1px 2px #bf326b;
          }
          .orange {
            background-image: linear-gradient(to right,#EE5417 0%,#FFF11C 51%,#EE5417 100%);
            text-decoration: none;
            text-shadow: -1px -1px 2px #e26031, 1px -1px 2px #e26031, -1px 1px 2px #e26031, 1px 1px 2px #e26031;
          }
          .lime {
            background-image: linear-gradient(to right,#7fd206 0%,#d0ff29 51%,#7fd206 100%);
            text-decoration: none;
            text-shadow: -1px -1px 2px #a1cb66, 1px -1px 2px #a1cb66, -1px 1px 2px #a1cb66, 1px 1px 2px #a1cb66;
}
          .blue {
            background-image: linear-gradient(to right,#3968c4 0%,#5390d7 51%,#3968c4 100%);
            text-decoration: none;
          }
          .cyan {
            background-image: linear-gradient(to right,#25A3FF 0%,#36ECFF 51%,#25A3FF 100%);
            text-decoration: none;
          }
          .red {
            background-image: linear-gradient(to right,#E52F15 0%,#FF3B3B 51%,#DE1F03 100%);
            text-decoration: none;
          }
          .green {
            background-image: linear-gradient(to right,#52d62c 0%,#ddff3c 51%,#52d62c 100%);
            text-decoration: none;
          }
          .indigo {
            background-image: linear-gradient(to right,#8153FF 0%,#E37FFF 51%,#E37FFF 100%);
            text-decoration: none;
          }
          .black {
            background-image: linear-gradient(to right, #353C4B 0%, #353C4B 51%, #353C4B  100%);
            text-decoration: none;
          }
          .default {
            background-image: linear-gradient(to right,#3968c4 0%,#539dec 51%,#3968c4 100%);
            text-decoration: none;
          }
.skin-citizen-dark .black,
.skin-citizen-dark .mw-parser-output .black {
  background-image: linear-gradient(to right, #757F9A 0%, #D7DDE8  51%, #757F9A  100%) !important;
}
          .black:hover,.default:hover,.blue:hover,.lime:hover,.indigo:hover,.red:hover,.cyan:hover,.green:hover,.pink:hover,.orange:hover {
            background-position: right center; /* change the direction of the change here */
            text-decoration: none;
            color: #fff;
            text-decoration: none;
          }

@media (max-width: 717px) {
  #home-nav {
  display: inline;
  }
  .ButtonGradient-container {
  margin-top: 0.5rem;
  }
}