Custom hover animation

Design help Animations & Interactions
1

My client wants me to implement this animation for our buttons https://codepen.io/avstorm/pen/WNrMqjG
Are we able to add animations with the custom code? I’m probably missing something because I’m adding the CSS to the element with the embed code and it does not work.

Could anybody help me to implement this effect? Or at least explain why adding the CSS to the element is not working?

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

If you’re copying directly from that Codepen you’ll need to convert it to standard CSS — right now it’s using the Stylus preprocessor:

image
image1364×398 50 KB

This looks like something you can build natively, but custom code will work as well after the conversion. Assuming you’re using a class named btn-shine, the code below should work for you.

Note: I omitted the positioning styles from the button class to hopefully make this a bit easier to use as I’m not sure where you’re placing it within the design

.btn-shine {
  padding: 12px 48px;
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
  
.btn-shine:hover {
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
}

@keyframes shine {
  0% { background-position: 0 }
  60% { background-position: 180px }
  100% { background-position: 180px }
}