プラスマイナスアイコン(ホバーアニメーション付き)

デモ

CSSコードコピー

※ 当サイトのリセットCSSにはressを使用しています。

使い方

span要素を1つ用意し、class="cca-iconPlus"を付与してください。

サンプルHTMLを表示する

解説

CSSコードの解説を見てみる

最初に配置・アイコンの大きさを決めます。
テキストが回り込むようにdisplay: inline-block;を当てておきます。
アイコンの表示要素は絶対配置にするため、position: relative;を当てておきます。

プラスの棒をbeforeafterで表現します。
横幅いっぱいの長さ、高さは0、top: 50%;で中央配置にします。
棒はborder-bottomで表現します。
ホバー時にアニメーションさせるため、transitionプロパティを設定します。
3つの値を指定しており、左からアニメーション対象プロパティtransform、アニメーション時間300ms、緩急ease-outです。

beforeafterで用意した2本の棒のうち1本をtransform: rotate(90deg);で縦向きにします。
横棒とアニメーションを少し変化させます。
transition-delayでアニメーション開始までの遅延時間を設定、transition-durationでアニメーション時間を上書きしています。

ホバー時に回転の角度を揃えることで1本の線に見せます。

ヘルプ・コンタクト

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。

他のコードを探す

リクエスト受付中です。
Twitter の固定ツイートか DM にてご連絡ください。