cssanimationcss-animationseffects

want to shine Effect on Button in ReactJS


Here, I want a shine effect on the button. I have done the basic one, but some modern shine effect is needed. I want to get into that button after hovering, so how do I make that more realistic and advanced shine effect? Can you give some suggestions? Codes are given below.

import "./styles.css";
import HomeIcon from "@mui/icons-material/Home";
export default function App() {
  return (
    <div className="App">
      <div class="container">
        <div class="nav shine">
          <div class="inner-icon ">
            <HomeIcon />
          </div>
          <p class="inner-text">Home</p>
        </div>
      </div>
    </div>
  );
}

css code is in below

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: lightgray;
}

.nav {
  width: 70px;
  background: gray;
  padding: 0px 0px 10px 0px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 50px;
  transition: 0.5s;
}
.nav:hover::before {
  content: "";
  position: absolute;
  background-color:  rgba(255, 255, 255, 0.5);
  left: 0px;
  top: 0px;
  height: 100%;
  width: 20px;
  animation: shine 2s infinite linear;
}
@keyframes shine {
  0% {
    left: 0px;
    opacity: 0;
    transform: translateX(0px) skewX(-15deg);
  }
  100% {
    left: 100px;
    opacity: 1;
    transform: translateX(5px) skewX(-15deg);
  }
}
.inner-text {
  position: absolute;
  bottom: -10px;
  opacity: 1;
  transition: 0.5s;
}

.nav:hover .inner-text {
  transform: translate(50px, -10px);
}
.nav:hover {
  padding: 0px 60px 0px 0px;
}

Solution

  • I always use sth like this:

    .shine {
      -webkit-mask-image: linear-gradient(
        -75deg,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 0.93) 50%,
        rgba(0, 0, 0, 1) 70%
      );
      -webkit-mask-size: 200%;
      animation: shine 2s linear infinite;
    }
      
    @keyframes shine {
      from {
        -webkit-mask-position: 150%;
      }
      to {
        -webkit-mask-position: -50%;
      }
    }
    

    Example, on a button. Notice that I increased the strength of the effect here by changing 0.93 to 0.75 to make it more visible for demonstration.

    GIF showing shine effect on a black button