How To Add Shine Animation To Every Button

Store Design
, , ,
1

Hello Support Team,

The title is pretty self explainitory

Can you tell how to add shine animation to every button on my website

For Example-

Refer To MP4

store url: www.faithandyou.in

theme: dawn

2

Hi @AryavK ,
Can you kindly share your store password with us? We will check it and suggest you a solution if possible.

3

THANK YOU @BSS-Commerce

I recently just locked the store cuz i am on a quick session to finish it

pw: hello

4

@BSS-Commerce

pw: hello

5

@BSS-Commerce

pls reply quick,

i am planning to launch the store at Jan 14th

6

Please insert this CSS into your CSS file:

.button {
    background-color: black !important;
    color: white !important;
    box-shadow: none;
    position: relative; 
    z-index: 1;
    overflow: hidden;
}

.button::before, .button::after, .button::hover {
  box-shadow: none!important;
}

.button:hover {
   transform: none !important;
   transition: none !important;
}

@keyframes shine {
    to {
      left: 100%;
    }
  }

#MainContent .button::after {
    content: '';
    z-index: -1 !important;
    position: absolute;
    top: 0 !important;
    left: -100%;
    width: 100% !important;
    height: 100% !important;
    transform: skew(-15deg) !important;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
}

.button:hover::after {
    animation: shine 1s ease;
}

Completed video: https://www.loom.com/share/0991d7ebe658490e9d0f722192a90ae8

I hope this helps you @AryavK

1 Like
7

YOU ARE THE DAMN BEST! BEST! YOU ARE GOATED G!