パーツ番号 10-04-12 ・ CSSのみ

地図ズームコントロール風UI

抽象地図の右下にズームボタン、右上にコンパスを配置した装飾。ボタンはホバーで浮き上がります。WordPressの地図セクションの雰囲気づくりに。

maphovercss

プレビュー

ソースコード

HTML

<div class="d10-04-12-map">
          <span class="d10-04-12-grid"></span>
          <div class="d10-04-12-ctrl">
            <button class="d10-04-12-btn" type="button" aria-label="拡大">＋</button>
            <button class="d10-04-12-btn" type="button" aria-label="縮小">－</button>
          </div>
          <div class="d10-04-12-compass"><span class="d10-04-12-n">N</span></div>
        </div>

CSS

.d10-04-12{padding:0}
        .d10-04-12-map{position:absolute;inset:0;background:#eaeef0;overflow:hidden}
        .d10-04-12-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe1e5 1px,transparent 1px),linear-gradient(90deg,#dbe1e5 1px,transparent 1px);background-size:34px 34px}
        .d10-04-12-ctrl{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.15)}
        .d10-04-12-btn{width:32px;height:32px;border:none;background:#fff;color:#334;font-size:16px;font-weight:700;cursor:pointer;border-bottom:1px solid #eef0f3;transition:background .2s}
        .d10-04-12-btn:last-child{border-bottom:none}
        .d10-04-12-btn:hover{background:#eaf2ff;color:#2f7fef}
        .d10-04-12-compass{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}
        .d10-04-12-n{font-size:11px;font-weight:800;color:#e2504a}

クラス名 .d10-04-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。