ゲーミングなボタン
前置き
前置きなんかねえよ、うるせえよ
デモ
See the Pen Gaming Button by kelp of truth (@kelp-of-truth) on CodePen.
コード
どうせ仕組みなんてどうでもいいでしょ？CSSだけコピペしてbutton要素のclassにgamingを指定しておけば多分動くよ
<body>
<button class="gaming">
Button
</button>
</body>
input:button？なんですかそれ
classはわかりやすいようにgamingにしておきます。
body{
background-color: #000;
text-align: center;
}
.gaming{
border: unset;
outline: unset;
border-radius: 99999px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
position: relative;
background-color: #000;
color: #fff;
font-weight: bold;
transition: 250ms;
}
.gaming::after{
content: "";
position: absolute;
left: -5px;
top: -5px;
z-index: -1;
width: 100%;
height: 100%;
padding: 5px;
background-color: transparent;
border-radius: 99999px;
animation: gaming 2000ms linear infinite;
background: linear-gradient(to right, Magenta, Yellow, Cyan, Magenta) 0% center/200%;
}
@keyframes gaming{
100%{
background-position-x: 200%;
}
}
border-radius: 99999px;ってどう思います？
(追記: border-radius: calc(infinity * 1px);という方法もあるとコメントをもらいました。clientWidthで調べてみたところ33554428pxになってるらしいでｓ)
仕組み
ボーダーにグラデーションは指定できないので、疑似要素の::afterを使用してパチモンのボーダーを作ります。元の要素のpositionをrelativeにして疑似要素のpositionをabsoluteにします。そしてpaddingで元の要素よりサイズを一回り大きくします。位置を合わせるためにleftとtopをマイナス方向に動かしておきます。
疑似要素の背景色を Cyan, Yellow, Magent, Cyan の順にグラデーション。
最後に背景を動かすアニメーションを設定します。
〜 完成 〜
終わりに
アニメーションを早くすると目がチカチカします
では、良きゲーミングライフを . . .