Felli
gurjyot
Here is what I use for my customised primary button wave.
You can preview here :
https://keys-daggers.org
Don't need to register, just click on the blue login button to see shimmer effect.
Add to bottom of Custom CSS. (You may need to remove any other customizations for Button--primary first)
.Button--primary {
text-align: center;
text-decoration: none;
opacity: .8;
display: inline-block;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.Button--primary:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
color: #ce8483;
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -7em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.Button--primary:hover {
opacity: 1;
color: white;
}
.Button--primary:hover:before {
-webkit-transform: skewX(-45deg) translateX(33em);
transform: skewX(-45deg) translateX(33em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
