html, body {
  height: 100%;
}

*, *::after {
  box-sizing: border-box;
}

body {
  font: 500 100%/1 "Nunito", sans-serif;
  background-color: #272420;
}

.list__item {
  color: #272420;
  height: auto;
  min-height: 33vh;
  padding: 40px 60px;
  display: grid;
  place-items: center;
  position: relative;
  background-color: #F3EDED;
}
.list__item:hover {
  background-position: 0% 100%;
}
.list__item:nth-child(2) {
  background-color: #F0D7C2;
}
.list__item:nth-child(3) {
  background-color: #C5B5CA;
}

.button {
  background-color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: currentColor;
  text-decoration: none;
  display: block;
  position: relative;
  text-align: center;
}
.button span {
  background-color: #97BEE6;
  display: inherit;
  padding: 1em 3em;
  border: 2px solid currentColor;
  border-radius: 2em;
  position: relative;
  z-index: 1;
  transform: translate(-0.4rem, -0.4rem);
  transition: 0.2s ease-in-out;
}
.button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2em;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid currentColor;
  background-color: inherit;
  pointer-events: none;
  mix-blend-mode: darken;
  filter: contrast(1200%) brightness(100%) saturate(0.25);
  overflow: hidden;
  background: linear-gradient(182deg, currentColor, currentColor 25%, rgba(0, 0, 0, 0) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 400 75' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.button:hover span {
  transform: translate(0px, 0px);
  transition: 0.2s ease-in-out;
}