ニューモーフィズムとは

ニューモーフィズムは簡単に言うと背景色とボタンの色が同じで背景から少し盛り上がっているようなボタンや表現のことです。

ボタンの制作方法

ボタンっぽさがなく、スタイリッシュで今っぽい印象のボタンを作成したい時に参考にしてください。

注意点:獲得系ではこのボタンはあまり効果を発揮できない可能性があります。(どこかでテストできるといいです)

あまり押させたくないボタンをニューモフィズムボタンにしてしまい、申込ボタンはテイストを合わせて目立つ色に

変更するなど、工夫をして活かせると思います。

試作として、ボタンを作成しました。

ボタンではなく、CSSを使い画像やデザインの一部として使用する方法

参考サイト:https://neumorphism.io/#55b9f3

上記参考サイトでコピペ可能なコードを作成できます。

htmlとCSSの両方でコードを見たい場合

codepenにもニューモフィズムのコードがいくつかあります。

参考にしてください。

  • BGMを動画の長さに編集する方法【Premiere Pro×Audition】
  • ページ制作で使えそうなカウントダウンタイマーのテンプレート
  • Chart.jsで簡単にレーダーチャートを作る方法
  • adobe charactor animatorで簡単にアニメーション動画を作る
  • Illustratorで簡単に表を作る方法
  • aftereffect トランジション&エフェクト素材
おすすめの記事
WEB
2021年10月10日 日経新聞朝刊に掲載されたロート製薬の広告がひそかに話題を呼びました。 1面巨大QRコード広告です。よく見ると「今日は...
バナー
色相環と呼ばれる、カラフルな色の丸い配色図で、反対の場所に位置する色を補色と呼びます。 この補色の関係は、お互いを目立たせる関係にあります。...
未分類
.htaccessで設定している301転送などを、フォルダ単位で無効化させる記述です。 あくまで「一部フォルダ」の転送を無効化させたい場合に...
LP
インフォグラフィックスとはさまざまな情報を一つにまとめて図形化したものを意味します。 電車の路線図や、テレビのニュース番組に出てくるテロップ...