<button class="button">Button</button>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2b2d42;
}
.button {
background: #8d99ae;
color: white;
font: 18px Georgia, sans-serif;
line-height: 42px;
padding: 1em 3em;
position: relative;
overflow: hidden;
}
.button::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(to bottom, rgba(230, 175, 145, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.button:hover::after, button:focus::after {
animation: sheen 1.5s forwards;
}
@keyframes sheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.