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

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

角丸ボタンを作る方法

ボタンの四隅を丸くした、角丸ボタンを作る方法を紹介します。このサンプルでは、基本のボタンをベースにCSSのborder-radiusを調整し、丸みのあるデザインに仕上げます。JavaScriptを使用せず、HTMLとCSSだけで実装できるシンプルなボタンです。

角を丸くすることで、四角いボタンよりも柔らかく親しみやすい印象を与えられます。お問い合わせページへのリンク、申し込みページへの移動、詳細ページを開くリンクなど、さまざまな場所で利用できます。基本的なボタンの形を保ったまま、CSSだけで見た目を変更できるのが特徴です。

HTMLではa要素を使ってリンクとして利用できるボタンを配置し、CSSでは背景色、文字色、内側余白、文字サイズに加えて角丸を設定します。border-radiusの数値を変更することで、わずかに角を丸くしたデザインから、丸みを強調したデザインまで調整できます。

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

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

デモ

角丸ボタン

四隅を大きく丸めたボタンです。

ボタン

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>

  <!-- 角丸ボタン -->
  <a
    class="rounded-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; /* ボタンを中央へ配置 */
}

/* 角丸ボタン */
.rounded-button_link{
  display:inline-block; /* 横幅を内容に合わせる */

  padding:14px 28px;
  /* 上下14px・左右28px。
     値を大きくするとボタンが大きくなる。 */

  border-radius:999px;
  /* ボタンの角丸。
     十分に大きな値を指定して左右の端を丸くする。 */

  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のborder-radiusを使ってボタンの四隅に大きな丸みを付けます。JavaScriptを使用せず、HTMLとCSSだけで角丸ボタンを表示できます。

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

各ファイルの役割
index.htmlは角丸ボタンを配置するファイルです。a要素の文字を変更でき、href="#"を変更すると任意のリンク先を設定できます。

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

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

カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssではボタンの内側余白、角丸、背景色、文字色、文字サイズを変更できます。特にborder-radiusを変更することで、角の丸みを弱くしたデザインから、左右の端を大きく丸めたデザインまで調整できます。

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

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

border-radius:999px;
ボタンの角丸を指定する値です。十分に大きな値を指定することで、ボタンの高さに合わせて左右の端が大きく丸く表示されます。値を小さくすると角の丸みが弱くなります。

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

レスポンシブ対応
このサンプルではページ全体の左右に20pxの余白を確保し、ボタンは内容に合わせた横幅で表示されます。そのため、スマートフォン・タブレット・PCなど画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。