【THE SONIC】この記事を書いた人(ウィジェット)のフォローボタンをおしゃれなニューモーフィズムにするカスタマイズ

バビ
バビ

ごきげんよう。バビです。

Neumorphism(ニューモーフィズム)というのが、Webやアプリのデザインで最近流行ってるんだそうです。

ボタンが表面から浮いてなくて、出っ張ったりへこんでたりするもので、↓こんな感じのデザインがそれ。

iPadのSmart Keyboard Folioみたいな感じです。

Twitterで見かけてちょっと押してみたくなるデザインだし、おしゃれっぽいなと思ったのでTHe SONICのフォローボタンをニューモーフィズムなボタンにカスタマイズしてみました。

バビ
バビ

参考にしたのはこのサイト。簡単にニューモーフィズムなボタンが作れます。

完成サンプル

完成サンプルはこんな感じです。

BEFORE

AFTER

カーソルを合わせると画像のFeedlyのようにボタンがフラットになってSNSアイコンが白くなるようにしてみました。

実際の表示・動作は私のメインサイト「バビ論」で確認できます。

CSS

以下のCSSをコピペして貼り付けるだけです。

/*--------------------------------------
  フォローボタンをニューモーフィズムにする
--------------------------------------*/
.widget-pf .pf-share {
background-color: #e0e0e0!important;/*全体の背景色*/
}
.widget-pf .share-btn i {
border-radius: 7px;
background: #e0e0e0!important;/*ボタンの色*/
box-shadow:  6px 6px 11px #c5c5c5,-6px -6px 11px #fbfbfb;
transition: 0.5s ;
}
.widget-pf .share-btn {
color: #333333;/*SNSアイコンの色*/
}
.widget-pf .share-btn :hover {
color: #fff;/*ホバー時のSNSアイコンの色*/
}
.widget-pf .share-btn i:hover {
box-shadow: none;
}

外観テーマの編集(子テーマの)「style.css」に貼り付けてください。

色はご自身のブログに合ったものに変えてください。

バビ
バビ

今回はこれでおわり!

コメントを残す

メールアドレスが公開されることはありません。