.fill-in-button {
    background: linear-gradient(to right, rgb(212, 175, 55) 50%, rgba(0,0,0,0) 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    border: 3px solid #D4AF37;
    color: #D4AF37;
    font-size: 1.5rem;
    position: relative;
    vertical-align: baseline;
    padding: 1rem 2rem;
    box-sizing: border-box;
    transition:all 0.200s ease;
}
.fill-in-button:hover {
    cursor: pointer;
    color: #222;
    text-shadow: 1px 1px 0px #ead17f;
    background-position:left bottom;
}

.borderred-button {
    border: none;
    background: none;
    color: #D0D0D0;
    font-size: 1.5rem;
    position: relative;
    vertical-align: baseline;
    padding: 1rem 2rem;
}

.borderred-button:before,
.borderred-button:after,
.borderred-button > .borderred-button-in:before,
.borderred-button > .borderred-button-in:after {
  content: '';
  position: absolute;
}

.borderred-button:hover {
    color: #D4AF37;
    cursor: pointer;
}

.borderred-button:hover > .borderred-button-in:before {
  bottom: 0%;
}

.borderred-button:hover:after {
  right: 0%;
}

.borderred-button:hover .borderred-button-in:after {
  top: 0%;
}

.borderred-button:hover:before {
  left: 0%;
}

.borderred-button .borderred-button-in:before {
  border-left: 3px solid #D4AF37;
  top: 0;
  bottom: 100%;
  left: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.borderred-button:not(:hover) .borderred-button-in:after,
.borderred-button:not(:hover) > .borderred-button-in:before,
.borderred-button:not(:hover):after,
.borderred-button:not(:hover):before {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.borderred-button:after {
  border-bottom: 3px solid #D4AF37;
  left: 0;
  right: 100%;
  bottom: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}

.borderred-button .borderred-button-in:after {
  border-right: 3px solid #D4AF37;
  top: 100%;
  bottom: 0;
  right: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}

.borderred-button:before {
  border-top: 3px solid #D4AF37;
  left: 100%;
  right: 0;
  top: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -moz-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -o-transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  transition-timing-function: cubic-bezier(0, 0.98, 0.51, 0.93);
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}