コピペOK!!CSSでニューモーフィズムのボタンデザイン

デザイン色々

今回はこんなお題に回答したいと思います。

記事のテーマ
●HTML、CSSでカッコいいボタンを作りたい
●ニューモーフィズムってなに?
●コードのスキルを磨きたい
●HTML、CSSをコピペして最近流行りのデザインを実装したい
〈かみぱにゃい〉
最近、TwitterとかのSNSでプログラミングの広告やエンジニアの人を良く見るようになったにゃー!
〈そろり兄やん〉
たしかに!!最近、僕の周りでも転職考えている人や、独学してる人から連絡来るようになったから、めちゃ、注目されてるよね。
〈かみぱにゃい〉
兄やん!!なんか、CSSで出来るカッコいいでデザイン教えてよ!
〈そろり兄やん〉
お任せあれ!!

この記事を書く僕のことを軽く紹介しておきます。

僕は現在、Web会社でフロントエンドエンジニアをしています。HTML/CSS/JSを使用したコーディングという業務もバリバリしています。なので、現在現場で使われているコードの書き方を紹介できます。

「ニューモーフィズム」デザインのボタンを解説しようと思います。
CSSを少し勉強した人であれば簡単に実装できます。

CSSでニューモーフィズムのボタンデザイン

最初に今回、紹介するのがこんな感じ!!

パソコンの場合はマウスを乗せてみてください。
スマホの場合はタップしてみてください。

See the Pen wvMgjLm by そろり兄やん (@sororiniyan) on CodePen.

ニューモーフィズムとは

Neumorphism(ニューモーフィズム)って聞き慣れないですよね!!

先ほどのデザインのように、凹凸あるデザインです。

最近、注目されてるデザインです。

名前の由来は2つの言葉を組み合わせています。

「ニュー」+「スキューモーフィズム」=「ニューモーフィズム」

ニューモーフィズムデザインのコード解説

ここからは、実際にコードの解説をしていきます。

先ほどのデザインを実装したい場合は、コピペOKですので
ご自身のサイトに反映されてください。

HTML部分

<div class="content">
 <a class="button" href="#"><i class="fas fa-caret-left"></i></a>
 <a class="button" href="#"><i class="fas fa-pause"></i></a>
 <a class="button" href="#"><i class="fas fa-caret-right"></i></a>
</div>

まずは、HTMLです。クラス名はあなたのサイトに変えて大丈夫です。

特に解説する部分はないですが、

i class="fas fa-caret-left"

この部分は「Font Awesome」のアイコンを使用しています。

無料でいろいろなアイコンが使用できます。

CSS部分

.content {
  margin: 0 auto;
  background-color: #efefff;
  padding: 50px 0;
  width: 400px;
  display: flex;
  justify-content: center;
}
.button {
  display: inline-block;
  margin-right: 30px;
  background-color: #efefff;
  width: 60px;
  text-align: center;
  line-height: 60px;
  color: #a2aec6;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,.3), -5px -5px 10px 0 rgba(255,255,255,1);
  text-shadow: 2px 2px 6px rgba(0,0,0,.3);
  transition: 0.5s
}
.fas {
  font-size: 20px;
}
.button:hover,
.button:active {
  box-shadow: none;
  background-color: #6d8ff8;
  color: #efefff;
}

少し知識あると簡単に分かると思います。

「.content」部分はデザインには関係なく、中央に配置されるようになってます。
ここでは背景の色をボタンの色と同じにするように注意するだけです。

「.button」部分はまず背景の色をコンテンツと同じ色にしましょう。
そして、「box-shadow」を調整するだけで、ニューモーフィズムデザインになります。

文字にも「text-shadow」で影をつけると僕のようにより自然になります。

「button:hover」と「button:active」は
マウスが重なったときとクリックしたときの動きを指定しています。

まとめ

まとめ(本の絵)

今回はcssでできる。「ニューモーフィズムのデザイン」でした。

今は全部理解できなくても
コードを毎日書いていたら、理解できる日がきます。

この記事を最後まで読んだあなたなら、すぐ理解できるようになります。
それは、コードのスキルには向上心が必要だからです。

より良いデザインの実装をしたいと思って読んだのは向上心の塊だと思います。

〈そろり兄やん〉
それでは!!
よき、エンジンニアライフを!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA