.btn {  border-radius: 4px;  border: 2px solid var(--font-color-two);  color: var(--font-color-two);  display: inline-block;  margin: 12px 0.25em;  overflow: hidden;  padding: 12px 60px 12px 16px;  position: relative;  text-decoration: none;  line-height: 1;
}
.btn.slim {   margin: 0px; padding: 4px 20px 4px 0; border: none;
}
.btn .btn-content {  font-size: 1em;  line-height: 1.2;  padding: 0 26px;  position: relative;  right: 0;  transition: right 300ms ease;  display: block;  text-align: left;
}
.btn .icon {  border-left: 1px solid var(--font-color-two);  position: absolute;  right: 0;  text-align: center;  top: 50%;  transition: all 300ms ease;  transform: translateY(-50%);  width: 58px;  height: 70%;
}
.btn.slim .icon {  border: none;
}
.btn .icon i {  position: relative;  top: 50%;  transform: translateY(-50%);
}
.btn:after {  content: '';  position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;  background-color: black;  opacity: 0;  transition: opacity 300ms ease;
}
.btn:hover .btn-content {  right: 100%;
}
.btn:hover .icon {  border-left: 0;  font-size: 1.8em;  width: 100%;  z-index: 1;
}