2018年10月15日(月)
クリックで展開するSNSシェアボタン
Result
See the Pen Share button by kachibito (@kachibito) on CodePen.
シェアボタンのアイコンもCSS製なのでコードは少し冗長化してますcss
.c-share {/*本体*/ position: relative; width: 3.4375em; height: 3.4375em; } .c-share__input {/*非表示にしておく*/ display: none; } .c-share__input:checked ~ .c-share__toggler .c-share__icon { transition: 0s; width: 0; height: 0; color: #639eff; } .c-share__input:checked ~ .c-share__toggler .c-share__icon::before {/*クリック（チェック）時に回転エフェクト*/ transform: rotate(-45deg); } .c-share__input:checked ~ .c-share__toggler .c-share__icon::...
0
1
6
12author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples
NEXT ›
[ユーザー投稿] 【WordPress課題解決事例】車・バイクの中古用品販売最大手のアップガレージ、「KUSANAGI」導入でクレーム減
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『クリックで展開するSNSシェアボタン』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・CSS3・アイコン・facebook・Google・twitterについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
