光るボタンCSS作成ツール
マウスホバーでキラッと光が走るアニメーションボタンをカスタマイズ可能なCSSジェネレーターです。
プレビュー
<a href="#" class="shiny-btn">{{text}}</a>.shiny-btn {
display: inline-flex;
justify-content: center;
align-items: center;
width: {{width}}px;
height: {{height}}px;
background: {{bg_color}};
color: {{text_color}};
font-weight: bold;
text-decoration: none;
position: relative;
overflow: hidden;
border-radius: 5px;
transition: all 0.3s;
}
.shiny-btn::before {
content: '';
position: absolute;
top: 0;
left: {{start_pos}};
width: {{shine_width}}%;
height: 100%;
background: linear-gradient(to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 100%);
transform: skewX({{skew}});
}
.shiny-btn:hover::before {
animation: shine {{duration}}s infinite;
}
@keyframes shine {
0% {
left: {{start_pos}};
}
30% {
left: {{end_pos}};
}
100% {
left: {{end_pos}};
}
}機能・使い方
- マウスホバー時にキラッとした光が走るボタンを作成するツールです。
::before擬似要素で光の層を作り、ホバー時に位置を移動させることでアニメーションを実現しています。- 強調したいCVボタン（購入、登録など）に非常に効果的です。
CSSプロパティの説明
overflow: hidden を親要素に指定することで、光がボタンの外にはみ出さないようにしています。
光の表現には linear-gradient を使用し、左右を透明にすることで自然な輝きを作っています。
transform: skewX(...) で光を斜めにし、動きにスピード感を出しています。
