アイコンの線が変形
メニュー⇄閉じる、再生⇄一時停止、＋⇄− の3つを、アイコンを差し替えずに線の回転・clip-path の頂点移動で変形させる。同じ図形が姿を変えるので、状態が連続して伝わる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- アイコンの差し替え（表示/非表示）は状態の連続性が切れる。同じ線が回って別の記号になると「同じボタンの別の状態」と伝わる
- 頂点数が同じ polygon 同士は clip-path で補間できる。三角と2本の棒も、4頂点×2枚に分ければ変形できる
- 回転の中心を線の中央に置く（transform-origin: center）。既定の左上だと線が弧を描いて飛ぶ
- 200〜250ms の ease-out。押した直後に形が変わり始めないと、押せたか分からず二度押しされる
コード（コピーして使えます）
<div class="im-wrap">
<div class="im-cell">
<button class="im-btn" id="imMenu" type="button" aria-expanded="false" aria-label="メニュー">
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><line class="im-l im-l1" x1="4" y1="7" x2="20" y2="7"/><line class="im-l im-l2" x1="4" y1="12" x2="20" y2="12"/><line class="im-l im-l3" x1="4" y1="17" x2="20" y2="17"/></svg>
</button>
<span class="im-cap">メニュー ⇄ 閉じる</span>
</div>
<div class="im-cell">
<button class="im-btn" id="imPlay" type="button" aria-pressed="false" aria-label="再生">
<span class="im-pp" aria-hidden="true"><span class="im-bar im-bar-l"></span><span class="im-bar im-bar-r"></span></span>
</button>
<span class="im-cap">再生 ⇄ 一時停止</span>
</div>
<div class="im-cell">
<button class="im-btn" id="imPlus" type="button" aria-expanded="false" aria-label="追加">
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><line class="im-l im-pv" x1="12" y1="4" x2="12" y2="20"/><line class="im-l im-ph" x1="4" y1="12" x2="20" y2="12"/></svg>
</button>
<span class="im-cap">＋ ⇄ −</span>
</div>
</div>