Noto SansJP使うなら、ボタンにアイコンは入れてもいいよ

littlebuddha

ボタンにアイコンを入れるとズレるという話があったので、私のやり方を書いてみる。

いくつかポイントがあって、

  • ボタンの中の文字は文字サイズでline-heightを揃える。（line高を文字サイズと同じにする）

  • 文字の上下のズレはpaddingで調整

  • アイコンは<span>タグで囲み、position:relative;top:0.2rem;のような形でずらす。

という感じが一番シンプルだと思う。


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <style>
        a {
            padding: 0.1rem 1rem 0.2rem 1rem; /* ここで補正 */

            background-color: #000;
            border: 1px solid #666;
            border-radius: 2rem;

            font-family: "Noto Sans JP", sans-serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            line-height: 1.0rem;
            text-decoration: none;
            vertical-align: middle;

            color: #fff;
        }

        a:hover {
            background-color: #666;
        }

        .material-symbols-outlined {
            position: relative; /* ここで補正 */
            top: 0.195rem; /* ここで補正 */

            margin:0 0 0 0.2rem;

            font-size: 1.2rem;
            line-height: 1.2rem;
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
    </style>
</head>

<body>
    <a href="" targrt="_top">ボタン<span class="material-symbols-outlined">arrow_circle_right</span></a>
</body>

</html>

いいなと思ったら応援しよう！