Button w/ Rolling Background Hover Animation

by Nick Iaconis

HTML

<button
  type="submit"
  name="add"
  form="ProductForm-template--16252078850109__main-product-721769693245"
  class="product-form__submit button button--primary button--fixed w-full"
>
  <span
    class="btn-fill"
    data-fill=""
  ></span>
  <span class="btn-text">Add to cart</span>
</button>

CSS

html {
  background-color: lightgray;
}

.button {
  position: relative;
  border-radius: 3.75rem;
  padding: clamp(1.125rem, 1.2vw, 1.375rem) clamp(1.625rem, 1.473vw, 1.875rem);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  overflow: hidden;
  border: 2px solid #0c0e10;
  /*border: none;
  box-shadow: #0c0e10 0 0 0 2px;*/
}

.button > .btn-fill {
  border-radius: 50%;
  background-color: white;
  width: 150%;
  height: 200%;
  position: absolute;
  box-shadow: #0c0e10 0 0 0 100px;
  transform: translateY(-76%);
  transition: transform .4s ease-out;
}

.button > .btn-text {
  position: relative;
  transition: color .4s;
}

.button:hover {
  color: #0c0e10;
}

.button:hover > .btn-fill {
  transform: translateY(0%);
  animation: .4s ease-out 1 hover-in;
}

/*@keyframes hover-out {
  from { transform: translateY(0%); }
  to { transform: translateY(-76%); }
}*/

@keyframes hover-in {
  from { transform: translateY(76%); }
  to { transform: translateY(0%); }
}