角丸ボタンを作る方法
ボタンの四隅を丸くした、角丸ボタンを作る方法を紹介します。このサンプルでは、基本のボタンをベースに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>サンプル一式を取得する場合 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など画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。
コメント