sass-animating-pseudo-elements.css

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

.pebble::before {
  content: "";
}

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

sass-animating-pseudo-elements.html

<!-- HTML code -->
<button>Oooh SHINY</button>

sass-animating-pseudo-elements.sass

/* See: https://cssanimation.rocks/pseudo-elements/ */

/* Sass code */

// General styles
button
  background: #e5ac8e
  color: #fff
  font-size: 14px
  border-radius: 0.5em
  padding: 0 1em
  position: relative
  overflow: hidden
  line-height: 32px

// Example: Shiny button
.pebble::before
  content: ""

button::after
  content: ''
  position: absolute
  top: -50%
  right: -50%
  bottom: -50%
  left: -50%
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0))
  transform: rotateZ(60deg) translate(-5em, 7.5em)

button:hover::after, button:focus::after
  animation: sheen 1s forwards

@keyframes sheen
  100%
    transform: rotateZ(60deg) translate(1em, -9em)

sass-animating-pseudo-elements.scss

/* See: https://cssanimation.rocks/pseudo-elements/ */

/* SCSS code */

// General styles
button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

// Example: Shiny button
.pebble::before {
  content: "";
}

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

Credit: https://cssanimation.rocks/pseudo-elements/

Animating pseudo-elements

Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML, and they can be animated. In this post we’ll use a pseudo-element to add a little visual flair to a button.