ボタンとは | バイブコーダーのための名称辞典

ボタンとは

クリック・タップで操作を実行させる、最も基本的な部品。見た目の強弱で役割の優先度を示す。

概要

クリックやタップで何らかの操作を実行させる、最も基本的な入力部品です。画面内でどの操作が一番重要かによって、塗りつぶしの「プライマリボタン」、枠線だけの「セカンダリボタン（アウトラインボタン）」、背景も枠線もない「テキストボタン（ゴーストボタン）」のように見た目を使い分けます。無効化した状態（disabled）も併せて用意しておくと、操作できないことが一目で伝わります。

別名

表記ゆれ：プライマリボタン、セカンダリボタン、アウトラインボタン、ゴーストボタン

「プライマリ」「セカンダリ」はボタンの優先度、「アウトライン」「ゴースト」は見た目（枠線のみ、背景なし）を指す言葉で、同じボタンでも呼び方が文脈によって変わります。

AI への伝え方

「プライマリボタンとセカンダリボタンを作って」のように優先度を伝えると、塗りつぶしか枠線かが決まります。hover（マウスを重ねたとき）と focus-visible（キーボード操作で選択したとき）のスタイルもセットで頼むと、押せることが視覚的に分かるボタンになります。

似たパーツとの違い

「CTA ボタン」はボタンの一種ですが、行動喚起という役割に特化して大きく目立たせる使い方を指します。「アイコンボタン」は文字を持たずアイコンだけで操作を示すボタンで、狭いスペースに収める用途で使い分けます。

デモ

コード

HTML

<div class="button-demo">
  <button class="button-demo__btn button-demo__btn--primary" type="button">プライマリボタン</button>
  <button class="button-demo__btn button-demo__btn--secondary" type="button">セカンダリボタン</button>
  <button class="button-demo__btn button-demo__btn--text" type="button">テキストボタン</button>
  <button class="button-demo__btn button-demo__btn--primary" type="button" disabled>無効化ボタン</button>
</div>

CSS

.button-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: sans-serif;
}

.button-demo__btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button-demo__btn--primary {
  border: 1px solid #0017c1;
  background: #0017c1;
  color: #fff;
}

.button-demo__btn--primary:hover {
  background: #000f8c;
  border-color: #000f8c;
}

.button-demo__btn--secondary {
  border: 1px solid #0017c1;
  background: #fff;
  color: #0017c1;
}

.button-demo__btn--secondary:hover {
  background: #e6e6e6;
}

.button-demo__btn--text {
  border: 1px solid transparent;
  background: transparent;
  color: #0017c1;
  padding-left: 8px;
  padding-right: 8px;
}

.button-demo__btn--text:hover {
  background: #e6e6e6;
}

.button-demo__btn:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.button-demo__btn:disabled {
  background: #b3b3b3;
  border-color: #b3b3b3;
  color: #fff;
  cursor: not-allowed;
}