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

ボタン

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

ボタンを作る方法を紹介します。本記事では、HTMLとCSSを使って、シンプルな基本ボタンを作成します。クリックできる button 要素を用意し、CSSで背景色、文字色、余白、角丸、ホバー時の色変更を設定することで、Webサイトで使いやすいボタンを作れます。

このサンプルコードでは、青色の基本ボタンを中央に配置し、マウスを重ねたときに背景色が少し濃くなるデザインにしています。お問い合わせフォームの送信ボタン、詳細ページへのリンクボタン、管理画面の操作ボタンなど、さまざまな場面で使いやすい基本形です。

HTMLとCSSだけで作れるため、初心者でも導入しやすく、色・角丸・文字サイズ・余白なども変更しやすい構成です。まずは基本のボタンを作りたい場合や、今後ボタンデザインをカスタマイズする土台として活用できます。

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

デモ

基本ボタン

HTMLとCSSで作るシンプルなボタンです。マウスを重ねると背景色が変わります。

<button> 要素にCSSを指定して、色・余白・角丸・ホバー時の見た目を設定しています。

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

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

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボタンを作る方法</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="button-basic_wrap">

    <h1 class="button-basic_title">
      基本ボタン
    </h1>

    <p class="button-basic_text">
      HTMLとCSSで作るシンプルなボタンです。マウスを重ねると背景色が変わります。
    </p>

    <button type="button" class="button-basic_button">
      ボタン
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにはボタンの構造を記述し、CSSファイルにはボタンの色やサイズ、角丸、ホバー時のデザインを記述しています。 

button-basic/
├── index.html
└── style.css

index.html と style.css を同じフォルダへ配置し、ブラウザで index.html を開くとボタンを表示できます。ボタンの色は background、文字色は color、角丸は border-radius、大きさは padding を変更することで自由にカスタマイズできます。

コメント