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

ボタン

角丸ボタンを作る方法

角丸ボタンを作る方法を紹介します。CSSの border-radius を使用することで、四角いボタンをやわらかい印象の角丸デザインへ変更できます。シンプルながら多くのWebサイトやWebアプリで採用されている定番のボタンデザインで、さまざまなレイアウトに合わせやすいのが特徴です。

このサンプルでは、HTMLとCSSだけを使って角丸ボタンを作成します。特別なライブラリやJavaScriptは必要なく、コピーしてそのまま利用できるシンプルな構成です。ボタンの色や文字サイズ、余白、角の丸みはCSSを書き換えるだけで自由にカスタマイズできます。

お問い合わせフォームや送信ボタン、メニュー、ダウンロードボタンなど、さまざまな用途で利用できます。CSSの基本を学びたい方はもちろん、実際のWebサイトへすぐ導入できる角丸ボタンを探している方にもおすすめのサンプルです。

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

デモ

border-radius を大きく指定すると、角が丸いボタンを作成できます。

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

<!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>

  <!-- ボタン配置エリア -->
  <div class="rounded-button_wrap">

    <!-- 角丸ボタン -->
    <button class="rounded-button_button" type="button">
      角丸ボタン
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLにボタンを配置し、CSSで角丸のデザインや色、余白、ホバー時の見た目を設定します。JavaScriptを使用しないため、HTMLとCSSだけで簡単に導入できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンの角の丸みは border-radius、色や文字サイズ、余白、ホバー時の色はCSSから自由に変更できるため、用途やデザインに合わせてカスタマイズできます。

コメント