/* button css */

/* Font: Source Code Pro */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600&display=swap');

.button {
  font-family: 'Source Code Pro', sans-serif;

  /* button elements */
  background-color: grey;   /* button color */
  border: none;             /* cancels out auto border */
  border-radius: 5px;       /* button edge roundness */
  height: 40px;             /* button height */
  width: 175px;             /* button width */
  opacity: 0.8;             /* button opacity on appearance */
  transition: 0.3s;         /* button appearance time */
  margin: 5px;             /* space between buttons */

  /* text elements */
  text-align: center;       /* text alignment */
  color: white;             /* text color */
  font-size: 16px;          /* text size */

  cursor: pointer;          /* cursor type on hover */
}

form {
  /* alignment elements */
  display: inline-block;
}

/* displays arrow */
.button:hover {
  opacity: 1;
}

/* smooths button transition */
.button span {
  position: relative;
  transition: 0.5s;         /* button span appearance time */
}

/* makes arrow appear on hover */
.button span:after {
  content: '\003e';
  position: absolute;       /* separates text and arrow */
  opacity: 0;               /* arrow doesn't appear until hover */
  right: -20px;             /* keeps arrow to the right after hover */
}

/* moves text on hover */
.button:hover span {
  padding-right: 25px;      /* moves text to right on hover */
}

/* makes arrow appear on hover */
.button:hover span:after {
  opacity: 1;               /* makes arrow appear on hover */
  right: 0;                 /* keeps arrow in the button */
}