portfolio/static/scss/_buttons.selected.scss

.btn,
input[type="submit"] {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -ms-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
  background-color: transparent;
  border: 0;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Consolas', monospace;
  font-size: 1.2rem;
  font-weight: 500;
  height: 2.7rem;
  line-height: 38px;
  margin: .5em;
  padding: 0 2rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn.pomegranate,
input[type="submit"].pomegranate {
  background-color: #c0392b;
  filter: drop-shadow(5px 5px 0 rgba(192, 57, 43, 0.6));
}

.btn.pomegranate:hover,
input[type="submit"].pomegranate:hover {
  filter: drop-shadow(5px 5px 0 rgba(192, 57, 43, 0.6)) brightness(50%);
}

.btn.discord,
input[type="submit"].discord {
  background-color: #5865F2;
  filter: drop-shadow(5px 5px 0 rgba(114, 137, 218, 0.6));
}

.btn.discord:hover,
input[type="submit"].discord:hover {
  filter: drop-shadow(5px 5px 0 rgba(114, 137, 218, 0.6)) brightness(50%);
}

.btn.github,
input[type="submit"].github {
  background-color: #292d32;
  filter: drop-shadow(5px 5px 0 rgba(41, 45, 50, 0.6));
}

.btn.github:hover,
input[type="submit"].github:hover {
  filter: drop-shadow(5px 5px 0 rgba(41, 45, 50, 0.6)) brightness(50%);
}

.btn:hover,
input[type="submit"]:hover {
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -ms-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
  color: #fff;
}

.btn.animation,
input[type="submit"].animation {
  animation: button-enter 1s ease-in-out forwards;
  -webkit-animation: button-enter 1s ease-in-out forwards;
  -ms-animation: button-enter 1s ease-in-out forwards;
  -moz-animation: button-enter 1s ease-in-out forwards;
  -o-animation: button-enter 1s ease-in-out forwards;
  opacity: 0;
  position: relative;
}

.btn.animation:nth-child(1),
input[type="submit"].animation:nth-child(1) {
  animation-delay: 0.25s;
}

.btn.animation:nth-child(2),
input[type="submit"].animation:nth-child(2) {
  animation-delay: 0.5s;
}

.btn.animation:nth-child(3),
input[type="submit"].animation:nth-child(3) {
  animation-delay: 0.75s;
}

.btn.animation:nth-child(4),
input[type="submit"].animation:nth-child(4) {
  animation-delay: 1s;
}

.btn.animation:nth-child(5),
input[type="submit"].animation:nth-child(5) {
  animation-delay: 1.25s;
}

.btn.animation:nth-child(6),
input[type="submit"].animation:nth-child(6) {
  animation-delay: 1.5s;
}

.btn.animation:nth-child(7),
input[type="submit"].animation:nth-child(7) {
  animation-delay: 1.75s;
}

.btn.animation:nth-child(8),
input[type="submit"].animation:nth-child(8) {
  animation-delay: 2s;
}

.btn.animation:nth-child(9),
input[type="submit"].animation:nth-child(9) {
  animation-delay: 2.25s;
}

.btn.animation:nth-child(10),
input[type="submit"].animation:nth-child(10) {
  animation-delay: 2.5s;
}

.btn.animation:nth-child(11),
input[type="submit"].animation:nth-child(11) {
  animation-delay: 2.75s;
}

.btn.animation:nth-child(12),
input[type="submit"].animation:nth-child(12) {
  animation-delay: 3s;
}

.btn.animation:nth-child(13),
input[type="submit"].animation:nth-child(13) {
  animation-delay: 3.25s;
}

.btn.animation:nth-child(14),
input[type="submit"].animation:nth-child(14) {
  animation-delay: 3.5s;
}

.btn.animation:nth-child(15),
input[type="submit"].animation:nth-child(15) {
  animation-delay: 3.75s;
}

.btn.hover,
input[type="submit"].hover {
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
  -ms-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -o-transition: all 350ms ease;
}

.btn.hover:hover,
input[type="submit"].hover:hover {
  transform: translateY(-0.5em);
  -webkit-transform: translateY(-0.5em);
  -ms-transform: translateY(-0.5em);
  -moz-transform: translateY(-0.5em);
  -o-transform: translateY(-0.5em);
}

.btn.midnight-blue,
input[type="submit"].midnight-blue {
  background-color: #2c3e50;
  filter: drop-shadow(5px 5px 0 rgba(44, 62, 80, 0.6));
}

.btn.midnight-blue:hover,
input[type="submit"].midnight-blue:hover {
  filter: drop-shadow(5px 5px 0 rgba(44, 62, 80, 0.6)) brightness(50%);
}

@-webkit-keyframes button-enter {
  from {
    opacity: 0;
    top: 2em;
  }

  70% {
    top: -.3em;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

@-moz-keyframes button-enter {
  from {
    opacity: 0;
    top: 2em;
  }

  70% {
    top: -.3em;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

@-o-keyframes button-enter {
  from {
    opacity: 0;
    top: 2em;
  }

  70% {
    top: -.3em;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes button-enter {
  from {
    opacity: 0;
    top: 2em;
  }

  70% {
    top: -.3em;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

.buttons {
  align-items: center;
  justify-content: center;
  text-align: center;
}