Lism Tips

Button（ボタン）

Button は、リンクをボタンの見た目にする部品です。塗りと枠線の2つの形、色・角・大きさの変え方、アイコンを端に寄せる方法をまとめています。

Button（ボタン）は、リンク（<a>）をボタンの見た目にする部品です。@lism-css/ui に入っています。

どんなときに使う？#

  • 「申し込む」「詳しく見る」のような、押してほしいリンクを目立たせるとき
  • 塗りつぶしと枠線だけの2種類で、大事さの差を見せたいとき

使い方#

<a> に b--button を付けます。枠線だけの形は b--button--outline を足します。-hov:-o は、マウスを乗せると少し透ける（opacity が下がる）クラスです。

表示例

申し込む 詳しく見る
html
<div class="l--cluster -g:15">
  <a class="b--button -hov:-o" href="#">申し込む</a>
  <a class="b--button b--button--outline -hov:-o" href="#">詳しく見る</a>
</div>
クラス 形
b--button 塗りつぶし（背景が文字の色、文字が背景の色）
b--button--outline 枠線だけ（背景は透明、枠は文字の色）
b--button--fill 塗りつぶし。専用の見た目は無く、b--button だけのときと同じ

色・角・大きさを変える#

背景は -bgc、文字の色は -c、角の丸さは -bdrs、大きさは -fz で変えます。この表示例の青いボタン2つは、色の上でも文字が読めるように -fz:l -fw:700 で大きく太くしています。内側の余白は em（文字の大きさを1とする単位）なので、-fz を大きくするとボタン全体が大きくなります。

表示例

角を少し丸く 枠線 大きく丸く
html
<div class="l--cluster -g:15 -ai:center">
  <a class="b--button -hov:-o -bgc:brand -bdrs:10 -fz:l -fw:700" href="#">角を少し丸く</a>
  <a class="b--button b--button--outline -hov:-o -c:brand -bdrs:10 -fz:l -fw:700" href="#">枠線</a>
  <a class="b--button -hov:-o -fz:l -bdrs:99 -px:25" href="#">大きく丸く</a>
</div>

アイコンを入れる#

ボタンの中に <svg class="a--icon"> と文字を並べます。中の要素のすきまは -g で変えます（ふつうは 0.4em）。ボタンの中のアイコンは、scale: 1.05 で少しだけ大きく描かれます。

html
<a class="b--button -hov:-o -g:5 -bdrs:10" href="#">
  <svg class="a--icon" aria-hidden="true">...</svg>
  <span>Button</span>
</a>

アイコンだけのボタンは、-w:fit（中身に合わせた幅）と同じ上下左右の余白で、四角にします。

html
<a class="b--button -hov:-o -w:fit -px:10 -py:10 -hl:0 -bdrs:10" href="#">
  <svg class="a--icon -fz:l" aria-hidden="true">...</svg>
</a>

アイコンを端に寄せる#

l--grid を足すと、ボタンが3つの列（左のアイコン・真ん中の文字・右のアイコン）になります。文字はいつも真ん中の列に入るので、アイコンがボタンの端に寄ります。

表示例

文字だけ
html
<div class="l--stack -g:15">
  <a class="b--button l--grid -hov:-bgc -bdrs:10" href="#">
    <span>文字だけ</span>
    <span class="a--icon" aria-hidden="true">→</span>
  </a>
</div>

b--button には、Grid のときのために次の CSS が入っています。

css
.b--button {
  place-content: center;
  place-items: center;
  grid-template-columns: minmax(1em, auto) 1fr minmax(1em, auto);
}
:where(.b--button.l--grid) > :not(.a--icon) {
  grid-column: 2;
}

専用の変数#

変数 意味 初期値
--c 文字の色 var(--base)（outline は var(--text)）
--bgc 背景の色 var(--text)（outline は transparent）
--bdc 枠線の色 transparent（outline は var(--c)）
--bdw 枠線の太さ 1px
--hl 行の高さの調整（ハーフレディング） var(--hl--s)

ほかに、すきま 0.4em・内側の余白 0.5em 0.875em が付き、下線は消えます。形のちがうボタンを並べても大きさがずれないように、塗りの形にも透明な枠線が付いています。

マウスを乗せると塗りと枠線を入れかえる（CSS を自分で足す）#

公式ドキュメントには、マウスを乗せると塗りと枠線が入れかわる -hov:reverse の例があります。これは @lism-css/ui には入っていないので、次の CSS を自分で足して使います。

scss
.-hov\:reverse {
  --hov-c: var(--bgc);
  --hov-bgc: var(--c);
  &:where(.b--button--fill) {
    --bdc: var(--bgc);
    --hov-bgc: transparent;
  }
  &:where(.b--button--outline) {
    --hov-c: var(--base);
  }
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--hov-bgc) !important;
      color: var(--hov-c) !important;
    }
  }
}
html
<a class="b--button b--button--fill -hov:reverse" href="#">Button</a>
<a class="b--button b--button--outline -hov:reverse" href="#">Button</a>

b--button--fill は、こうして塗りの形だけに CSS を当てたいときの目印になります。

React・Astro で書く場合#

jsx
import { Button } from '@lism-css/ui/react/Button';

<Button href="#" variant="fill">申し込む</Button>
<Button href="#" variant="outline" c="brand" bdrs="10">詳しく見る</Button>
<Button href="#" layout="grid" max-w="20em" bdrs="10" hov="-bgc">
  <span>Button</span>
  <Icon icon={ArrowRightIcon} />
</Button>

Astro では @lism-css/ui/astro/Button から読み込みます。公式の出力例では、コンポーネントから出た HTML に -hov:-o が付いています。layout="grid" で l--grid の形になります。

Props 何をするか
variant b--button--{variant} のクラスを付ける。用意されている見た目は、指定なし（塗り）と outline の2つ。fill を指定すると b--button--fill が付くが、見た目は指定なしと同じ

@lism-css/ui を使わずに作る#

本体のクラスだけでも作れます。

表示例

Button Button
html
<div class="l--cluster -g:15">
  <a href="#" class="-d:inline-flex -td:none -c:base -bgc:text -hl:s -py:10 -px:20 -bdrs:20 -hov:-o">Button</a>
  <a href="#" class="-d:inline-flex -td:none -c:inherit -bd -hl:s -py:10 -px:20 -bdrs:20 -hov:-o">Button</a>
</div>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧