SNSのシェアボタンってどれくらいの人が使うんだろう。
よっぽど興味深い記事だと家族や友達にシェアとかするんかな。

SNS
ソーシャル・ネットワーキング・サービス
（social networking service）

WEBサイトには必需品となっておりますSNSシェアアイコン。
今回これを自作してみました
作ったのは以下５つ。

■Twitter
■Facebook
■LINE
■Pocket
■はてなブックマーク

↓こんな感じになりました。
なかなか可愛いでしょ。
早速サイトでも使っています。

パソコン表示用
スマホ表示用

前回作ったボタンに各SNSの色つけてアイコン入れて並べただけです。
是非参考にしてみてください。

※LINEとはてなブックマークはアイコンがなかったのでSVGで作成しました。

各SNSの指定カラーの影の色をつける時、同じ色相を保ちながら、彩度か輝度をほんの少し、数%下げて色を指定すると同じ色味で少し沈んだ影色が指定できます。

カラーピッカーや数値で指定する際に、RGBで指定するより、この場合HSLで色指定するとやりやすいかもしれません。

CSSで動くボタンをつくる！クリック押下ボタン。