61 lines
1.3 KiB
SCSS
61 lines
1.3 KiB
SCSS
.shiny-button {
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box, border-box;
|
|
background-image: linear-gradient(to bottom right, #0b0333, #091221), linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, .6) 50%, hsla(0, 0%, 100%, 0) 53%);
|
|
background-origin: border-box;
|
|
background-position: 0, -50%;
|
|
background-size: 100%, 200%;
|
|
|
|
&::after {
|
|
animation: glint 4s linear infinite backwards;
|
|
animation-delay: -3s;
|
|
background-image: linear-gradient(125deg, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, .4) 50%, hsla(0, 0%, 100%, 0) 52%);
|
|
content: " ";
|
|
height: 200%;
|
|
left: -120%;
|
|
position: absolute;
|
|
top: -50%;
|
|
width: 200%;
|
|
}
|
|
|
|
&:hover {
|
|
animation: border-glint 2s linear;
|
|
border: 2px solid transparent !important;
|
|
background-image: linear-gradient(to bottom right, #0b0333, #091221), linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, .6) 50%, hsla(0, 0%, 100%, 0) 53%) !important;
|
|
}
|
|
}
|
|
|
|
@keyframes border-glint {
|
|
|
|
0% {
|
|
background-position: 0, 115%;
|
|
}
|
|
|
|
25% {
|
|
background-position: 0, 75%;
|
|
}
|
|
|
|
75% {
|
|
background-position: 0, -15%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0, -15%;
|
|
}
|
|
}
|
|
|
|
@keyframes glint {
|
|
0% {
|
|
left: -120%;
|
|
}
|
|
|
|
8% {
|
|
left: 50%;
|
|
}
|
|
|
|
100% {
|
|
left: 50%;
|
|
}
|
|
} |