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

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

この記事の内容

HTML、CSSでカッコいいボタンを作りたい
ニューモーフィズムってなに？
コードのスキルを磨きたい
HTML、CSSをコピペして最近流行りのデザインを実装したい

アフロ

最近、TwitterとかのSNSでプログラミングの広告やエンジニアの人を良く見るようになったにゃー！

たしかに！！最近、僕の周りでも転職考えている人や、独学してる人から連絡来るようになったから、めちゃ、注目されてるよね。

にぃやん

アフロ

兄やん！！なんか、CSSで出来るカッコいいでデザイン教えてよ！

お任せあれ！！

にぃやん

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

現在、Web会社でフロントエンドエンジニアをしています。HTML/CSS/JSを使用したコーディングという業務もバリバリしています。

なので、現在現場で使われているコードの書き方を紹介できます。

「ニューモーフィズム」デザインのボタンを解説しようと思います。

CSSを少し勉強した人であれば簡単に実装できます。

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

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

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

See the Pen
wvomzdL by えんにぃ (@enjiniyan)
on CodePen.

ニューモーフィズムとは

Neumorphism（ニューモーフィズム）って聞き慣れないですよね！！

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

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

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

「ニュー」＋「スキューモーフィズム」＝「ニューモーフィズム」

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

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

先ほどのデザインを実装したい場合は、コピペ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です。クラス名はあなたのサイトに変えて大丈夫です。
特に解説する部分はないですが、

 html
<i class="fas fa-caret-left"></i>

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

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

CSS部分

.content {
  margin: 0 auto;
  background-color: #efefff;
  padding: 50px 0;
  width: 70vw;
  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でできる。「ニューモーフィズムのデザイン」でした。

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

この記事を最後まで読んだあなたなら、すぐ理解できるようになります。

それは、コードのスキルには向上心が必要だからです。

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

にぃやん

それでは！！よき、エンジンニアライフを！