基本のボタンを作る方法【HTML/CSS・サンプルコード付き】

文字・サイズ・色・角丸・グラデーション・アイコン・ホバー・立体表現などを設定して、HTML・CSSを自動生成できます。

基本のボタンを作る方法

基本のボタンを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用してシンプルなボタンを作成します。余計な装飾やアニメーションは加えず、Webサイトでよく利用される基本的なボタンを実装します。HTMLとCSSの基礎を学びたい方や、さまざまなボタンデザインのベースとして利用したい場合にもおすすめです。

お問い合わせ画面の送信ボタン、会員サイトの登録ボタン、ECサイトの商品購入ボタン、管理画面の保存ボタンなど、さまざまなWebサイトで利用できます。シンプルなデザインのため、用途を選ばず導入しやすく、そのまま利用することはもちろん、今後デザインを変更するベースとしても活用できます。

ボタンに表示する文字はHTMLから変更でき、CSSでは背景色、文字色、余白、角丸、文字サイズなどを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用しやすく、初心者でも導入しやすい基本的なボタンのサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

基本のボタン

シンプルなデザインのボタンです。

ボタン

基本的なボタンのデザインを確認できます。

コードをコピーして使おう！

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

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>基本のボタン</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ボタン -->
  <a
    class="basic-button_link"
    href="#">
    ボタン
  </a>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  text-align:center; /* ボタンを中央へ配置 */
}

/* ボタン */
.basic-button_link{
  display:inline-block; /* 横幅を内容に合わせる */
  padding:14px 28px;
  /* 上下14px・左右28px。
     値を大きくするとボタンが大きくなる。 */

  border-radius:10px;
  /* ボタンの角丸。
     値を大きくすると丸みが強くなる。 */

  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  text-decoration:none; /* 下線を消す */

  font-size:16px;
  /* ボタンの文字サイズ。
     値を大きくすると文字が大きくなる。 */

  font-weight:700; /* ボタンを太字にする */
}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではa要素を使用してリンク形式のボタンを配置し、CSSではボタンの内側余白、角丸、背景色、文字色、文字サイズなどを設定します。JavaScriptや外部ライブラリを使用せず、HTMLとCSSだけで基本的なボタンを表示できます。

sample/
    ├── index.html
    └── style.css

各ファイルの役割
index.htmlはボタンを配置するファイルです。a要素の「ボタン」という文字を変更すると、用途に合わせた表示へ変更できます。href属性の「#」は、ボタンをクリックしたときのリンク先に変更できます。

style.cssはページ全体とボタンのデザインを設定するファイルです。ボタンの内側余白、角丸、背景色、文字色、文字サイズ、文字の太さなどを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ボタンとして使用する場合は、index.htmlのa要素にあるhref="#"を移動先のURLへ変更します。

カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssでは.basic-button_linkの内側余白、角丸、背景色、文字色、文字サイズ、文字の太さを変更できます。また、bodyの余白や背景色を変更して、ボタンを配置するページ全体の表示も調整できます。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると画面上端・下端との間隔が広がり、左右の20pxを大きくすると画面左右との間隔が広がります。

padding:14px 28px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の28pxを大きくするとボタンが横に広がります。

border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない四角いボタンになります。

font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。

font-weight:700;
ボタンの文字の太さです。値を小さくすると細くなり、対応する範囲で値を大きくすると太く表示されます。

レスポンシブ対応
このサンプルではボタンの横幅を固定せず、display:inline-block;によって文字と内側余白に合わせた横幅で表示します。ページ全体には左右20pxの余白を設定しているため、スマートフォン・タブレット・PCでも画面端に密着せず表示できます。