Scribd
Upload
49 views1 page

Glimmer Css

This CSS code defines styles for a button with a glimmer effect. It positions elements relative to each other and adds an after element with a gradient background that animates from left to right on the button for an infinite looping glimmer effect. Keyframes are used to define the animation from -80% left to 80% right over 5 seconds.

Uploaded by

Aya Iya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
49 views1 page

Glimmer Css

This CSS code defines styles for a button with a glimmer effect. It positions elements relative to each other and adds an after element with a gradient background that animates from left to right on the button for an infinite looping glimmer effect. Keyframes are used to define the animation from -80% left to 80% right over 5 seconds.

Uploaded by

Aya Iya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

/* Button Glimmer */

.cfs-btn-glimmer {
position: relative;
overflow: hidden;
}

.cfs-btn-glimmer:after {
display: none;
content: ' ';
position: absolute;
top: -50%;
right: -60%;
bottom: -50%;
left: -60%;
background: linear-gradient(50deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255,
255, 0.5) 50%, rgba(255, 255, 255, 0) 60%);
-webkit-transform: translate(-80%, 0px);
-ms-transform: translate(-80%, 0px);
transform: translate(-80%, 0px);
}

.cfs-btn-glimmer--loop:after {
display: block;
animation: 5s cfs-glimmer infinite;
}

@keyframes cfs-glimmer {
0% {
-webkit-transform: translate(-80%, 0px);
-ms-transform: translate(-80%, 0px);
transform: translate(-80%, 0px);
}

50% {
-webkit-transform: translate(80%, 0px);
-ms-transform: translate(80%, 0px);
transform: translate(80%, 0px);
}
}

You might also like