Four variations of the glossy "shine" effect for buttons and links: hover shine, dark shine, auto-animated shine and an alternative double sweep.
Sign in with your free account to like snippets and add them to your favorites.
<html>
<head>
<title>Shiny Button</title>
</head>
<body>
<div class="container">
<a href="#" class="btn btn-hover">CodeBlanks</a>
<a href="#" class="btn btn-hover bg-black">Shine</a>
<a href="#" class="btn btn-anim">Animated Shine</a>
<a href="#" class="btn-alt">Alternative Shine Effect</a>
</div>
</body>
</html>@import url(https://fonts.googleapis.com/css?family=Raleway:300);
:root {
--btn-border: 1px solid rgba(255, 255, 255, 0.2);
--btn-bg: transparent;
--btn-shadow: 1px 1px 25px 10px rgba(255, 255, 255, 0.5);
--btn-text-color: #f4f4f4;
--shine-degree: 120deg;
--shine-color: rgba(255, 255, 255, 0.2);
--shine-effect: linear-gradient(var(--shine-degree), transparent, var(--shine-color), transparent);
--shine-transition: all 0.65s ease-in-out;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #111;
font-family: "Raleway", Arial, Helvetica, sans-serif;
}
body .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2rem;
}
.btn {
position: relative;
overflow: hidden;
font-size: 1.1rem;
padding: 1rem 3rem;
border-radius: 4px;
text-decoration: none;
border: 4px solid rgba(255, 255, 255, 0.2);
color: #f4f4f4;
background: #8d3131;
width: 400px;
height: 100px;
border-radius: 50px;
text-align: center;
align-content: center;
}
.btn:not(:last-child) {
margin-bottom: 3rem;
}
.btn::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.bg-black {
background: #000000;
}
.btn-hover::before {
left: -100%;
transition: all 0.65s ease-in-out;
}
.btn-hover:hover::before {
left: 100%;
}
.btn-hover:hover {
box-shadow: 1px 1px 7px 5px rgb(255 255 255 / 10%);
}
.btn-anim::before {
-webkit-animation: shine 5s ease-in-out infinite;
animation: shine 5s ease-in-out infinite;
}
@-webkit-keyframes shine {
0% {
left: -100%;
transition-property: left;
}
11.5044247788%,
100% {
left: 100%;
transition-property: left;
}
}
@keyframes shine {
0% {
left: -100%;
transition-property: left;
}
11.5044247788%,
100% {
left: 100%;
transition-property: left;
}
}
.btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
width: 250px;
height: 60px;
font-size: 1.1rem;
position: relative;
overflow: hidden;
border-radius: 4px;
text-decoration: none;
border: var(--btn-border);
color: var(--btn-text-color);
background: var(--btn-bg);
}
.btn-alt:not(:last-child) {
margin-bottom: 3rem;
}
.btn-alt::before,
.btn-alt::after {
content: "";
display: block;
position: absolute;
height: 100%;
top: 0;
}
.btn-alt:before {
background: rgba(255, 255, 255, 0.5);
width: 60px;
left: 0;
filter: blur(30px);
-webkit-animation: shine-alt1 5s ease-in-out infinite;
animation: shine-alt1 5s ease-in-out infinite;
}
.btn-alt:after {
background: rgba(255, 255, 255, 0.2);
width: 30px;
left: 30px;
filter: blur(5px);
-webkit-animation: shine-alt2 5s ease-in-out infinite;
animation: shine-alt2 5s ease-in-out infinite;
}
@-webkit-keyframes shine-alt1 {
0% {
opacity: 0.5;
transform: translateX(-100px) skewX(-15deg);
transition-property: opacity, transform;
}
11.5044247788%,
100% {
opacity: 0.6;
transform: translateX(300px) skewX(-15deg);
transition-property: opacity, transform;
}
}
@keyframes shine-alt1 {
0% {
opacity: 0.5;
transform: translateX(-100px) skewX(-15deg);
transition-property: opacity, transform;
}
11.5044247788%,
100% {
opacity: 0.6;
transform: translateX(300px) skewX(-15deg);
transition-property: opacity, transform;
}
}
@-webkit-keyframes shine-alt2 {
0% {
opacity: 0;
transform: translateX(-100px) skewX(-15deg);
transition-property: opacity, transform;
}
11.5044247788%,
100% {
opacity: 1;
transform: translateX(300px) skewX(-15deg);
transition-property: opacity, transform;
}
}
@keyframes shine-alt2 {
0% {
opacity: 0;
transform: translateX(-100px) skewX(-15deg);
transition-property: opacity, transform;
}
11.5044247788%,
100% {
opacity: 1;
transform: translateX(300px) skewX(-15deg);
transition-property: opacity, transform;
}
}The "shine" effect imitates light reflecting off a glossy surface. This snippet shows four variations side by side, each built with a single pseudo-element animation, and you can pick the one that fits your design.
.btn.btn-hover: the reflection crosses the button only when the cursor is over it..btn.btn-hover.bg-black: the same effect on a dark background, where the shine stands out more..btn.btn-anim: the shine keyframes run on their own, so the button glints periodically without interaction..btn-alt: a transparent, outlined version where two blurred light bars (::before and ::after) travel across with the shine-alt1 and shine-alt2 animations for a softer double sweep.Each button has position: relative and overflow: hidden. A ::before pseudo-element filled with linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent) starts at left: -100% and is moved to left: 100%, either by a 0.65 s hover transition or by the 5-second shine keyframes. The outlined version takes its border, background and text colour from the --btn-* variables in :root, which also defines --shine-* variables you can use to centralise the gradient.
:root variables and the rules for the variation you want.<a class="btn btn-hover">.0.2 alpha in the gradient for a stronger reflection, or change 120deg for a different angle.width: 400px and height: 100px with values that suit your layout.The demo loads the Raleway font from Google Fonts; remove the @import line if you already use your own font.
No comments yet. Be the first to comment.