cssで作るシェアボタンのデザインパターン36種類 - FOXISM

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

[gayou]

今時スマホからのアクセスが多いのに、スマホではダメなデザインパターン。

[gattolibero]

めちゃめちゃイイ感じ。スマホだと崩れるのかな？

[ta87523]

参考にさせていただきますヾ(*・ω・)ﾉ

[kozura]

つかえそうですね。

[tashiteku]

こりゃ使える！

[meganeshufu]

いつか使おう

[alastor914]

いいね

[hinail]

”Hatebu”

[mw-matrixa]

オシャレだけどスマホで使えないのはまずいかも。スマホで使える使えないってのは何で決まるんですかね

[nogeira]

これは使える！便利です。

[suquiya0]

もぐもぐ。

[hachi09]

シュミレーターと実機確認だいじ…( 'ω')／シュミレーターも実機も崩れてますね…

[cild]

無口なエンジニアって感じ

[ryuukakusan]

すごい便利やん

[gnufrfr]

何これスマホでほとんど崩れとるやんけ笑。デザインパターンってデザインパターン(？)って

[wiz7]

ボタンの綺麗なサンプル集

[aino_seo]

おしゃれですね♪参考になりました！

[nukoblog]

いっぱいある！好きなデザインを選びたいです！

[syofuso]

すごいこれ。3が一番好き。

[takamatumoto7]

ありがたいまとめなんだけど表示がおかしくなってるのがちょっと残念

[Daisuke-Tsuchiya]

ほほーよりどりみどり

[tsubasa123]

素晴らしい。サイドバーの目次がすごいことに。

[c-miya]

なんかうまく表示できない所あるけどもういい。ちなみにこの記事、コードたくさんあるせいで20万字超えてますた。

[hrktksm]

シェアボタンの見た目も変えようかと思ってたのでありがたい。これだけパターンがあれば人と被ることも少なそう。

[mashirotan]

種類が豊富！