キラッと光るボタン
常時CSSのみボタン
キラッと光の筋が走るボタンデザインです。
実装のポイント
ボタンの上にCSSのlinear-gradient()で作った光の筋を乗せて、background-positionをアニメーションさせて動かしています。
background-sizeによって移動量のbackground-poisitionの値も変わってくるのでうまく調整してください。
コード例
HTML
<button class="sampleButton noBorder">Button</button>
CSS
.sampleButton {
--ease-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
position: relative;
background-image: linear-gradient(20deg, #ff8d2a 10%, #ffb702 70%, #fbf025);
color: #fff;
&:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
70deg,
transparent 40%,
rgb(255 255 255 / 0.25) 47%,
rgb(255 255 255 / 0.5) 50%,
rgb(255 255 255 / 0.25) 53%,
transparent 60%
);
background-size: 120px 100%;
background-repeat: no-repeat;
mix-blend-mode: overlay;
animation: shiny 2s var(--ease-out-quart) infinite;
}
}
@keyframes shiny {
0% {
background-position: -180% 0;
}
20% {
background-position: -180% 0;
}
80% {
background-position: 280% 0;
}
100% {
background-position: 280% 0;
}
}
