Button

ネオンのように光るボタンデザイン 6選

ネオンボタン
Loa

光るネオンボタンで目をひくデザインに!

ボタンの中でも最近たまに見かけるようになった、ネオンのように光るボタンをご紹介したいと思います。

夜のネオン街のような不思議な魅力があるボタンを簡単に作ることができます。

背景が暗い色の場合にしか使うことが難しいですが、一度は作ってみたいデザインですよね。

いろんなパターンのデザインを作ってみましたので、コピペして自由に使ってみてください♪

では一緒に作ってみましょう。



まわりが青白く光るネオンボタン

ボタンのまわりが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.

まとめ

今回は色んな色で光るネオンのようなボタンをご紹介しました。

日本ではあまり見かけることはないですが、海外では派手なデザインは目をひきやすいため人気があります。

text-shadowやbox-shadowをうまく使いこなす練習にもなるのでチェレンジしてみてください♪

日本でもネオンブームを作っいきましょう!

Loa

最後までご覧いただきありがとうございました☆彡



関連するタグ