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;
}
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.