Result シェアボタンのアイコンも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); }
![CSSスニペット:クリックで展開するSNSシェアボタン | かちびと.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)