［CSSなど］ネオン風ボタンのジェネレータ

ネオン風ボタンのジェネレータです。［Controls］の色相、彩度、明度のスライダーを動かして、カスタマイズしたネオン風のbutton要素を作成できます。［Controls］の右のcssコードをコピー&ペーストして、webページなどで利用できます。グラデーション、アニメーションのオプションも付いています。それぞれチェックボックスのチェックをオンにすることで利用できます。

Controls

色相 0

彩度 0%

明度 0%

グラデーション

アニメーション

    
appearance: none;
border: 0px none rgb(51, 153, 153);
-webkit-font-smoothing: antialiased;
border-radius: 4px;
display: flex;
padding: 8px 16px;
justify-content: center;
cursor: pointer;
font-weight: 700;
font-size: 18px;
letter-spacing: 1.5px;
text-align: center;
text-transform: uppercase;
font-family: Helvetica;

/* Color */
color: rgb(51, 153, 153);
text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px, rgba(255, 255, 255, 0.15) 0px 1px 0px;

/* Background */
background: rgba(0, 0, 0, 0) linear-gradient(rgb(64, 191, 191), rgb(57, 172, 172)) repeat scroll 0% 0% / auto padding-box border-box;

box-shadow: rgba(68, 193, 193, 0.3) 0px 5px 10px 0px, rgba(68, 193, 193, 0.25) 0px 10px 40px 0px, rgba(68, 193, 193, 0.25) 0px 15px 80px 0px, rgba(0, 0, 0, 0.05) 0px 2px 1px 0px, rgba(0, 0, 0, 0.05) 0px 4px 2px 0px, rgba(0, 0, 0, 0.05) 0px 8px 4px 0px, rgba(0, 0, 0, 0.05) 0px 16px 8px 0px, rgba(0, 0, 0, 0.05) 0px 32px 16px 0px, rgba(0, 0, 0, 0.6) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset;

transition: box-shadow 0.2s ease 0s, background 0.2s ease 0s;
will-change: box-shadow, background;

⊗ 参考、引用元： https://codepen.io/LukyVj/pen/KKNjYKR

document.write(document.title);