ネオンのように光るボタンデザイン 7選
光るネオンボタンで目をひくデザインに！
ボタンの中でも最近たまに見かけるようになった、ネオンのように光るボタンをご紹介したいと思います。
夜のネオン街のような不思議な魅力があるボタンを簡単に作ることができます。
背景が暗い色の場合にしか使うことが難しいですが、一度は作ってみたいデザインですよね。
いろんなパターンのデザインを作ってみましたので、コピペして自由に使ってみてください♪
では一緒に作ってみましょう。
よく読まれている記事
まわりが青白く光るネオンボタン
ボタンのまわりがLEDライトのように発光するようなボタンアニメーションです。
マウスオーバーでボタンの色とテキストの色が反転するデザインは分かりやすくていいですね。
シンプルなので、ネオンを使ったことのない方にオススメです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
枠と文字がオレンジに光るネオンボタン
ボタンの枠とテキストがオレンジ色に発行するようなスタンダードなボタンアニメーションです。
マウスオーバー時に枠の発行がさらに強く発光するシンプルなデザインで使いやすいと思います。
フォントのデザインを変えてみても可愛くなりそうですね。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
月のように光る丸いネオンボタン
丸い月のように明るく光るようなボタンアニメーションです。
マウスオーバーするとボタンまわりの光が消えてシンプルなボタンに変化します。
丸ボタンは場所を取らずどこでも設置できて万能です。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
枠と文字が別の色で光るネオンボタン
2色の色を使って枠とテキストの色がおしゃれなボタンアニメーションです。
このままでもネオン感が強いデザインですが、マウスオーバーすると光がチカチカしてさらにネオン感が増します。
いろんな色の配色で自分だけのデザインを作っみてください。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
空間に浮いているように光るネオンボタン
四角いボタンが空中に浮いて3Dのように見えるボタンアニメーションです。
マウスオーバー時は、発光と影がなくなりよりボタンとして認識しやすくなっています。
今回はborder-colorもピンクにすることで、より濃いピンクネオンを表現しています。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
文字が蛍光灯のように光るネオンボタン
3本の線でできたテキストが蛍光灯のようなボタンアニメーションです。
フォントを少し変わったデザインにするだけで、ワンランク上のデザインに仕上がりますね。
発光色に薄いオレンジ色を付けるだけで、簡単にネオン風に作ることができます。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
ドットがライトのように光るネオンボタン
点線でできたボタンが豆電球ライトのように光るボタンアニメーションです。
ドットのようなフォントに合わせて枠もドットにすることで統一感が出ておしゃれに見せることができます。
珍しいデザインですが、作りはとってもシンプルなので簡単に実装できて初心者の方にもオススメです。
See the Pen
ボタンアニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は色んな色で光るネオンのようなボタンをご紹介しました。
日本ではあまり見かけることはないですが、海外では派手なデザインは目をひきやすいため人気があります。
text-shadowやbox-shadowをうまく使いこなす練習にもなるのでチェレンジしてみてください♪
日本でもネオンブームを作っいきましょう！
最後までご覧いただきありがとうございました☆彡