CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでピルボタンを作成する方法｜border-radiusの使い方を解説

ピルボタン（カプセル型の丸みを帯びたボタン）は、CSSの border-radius プロパティを活用することで簡単に作成できます。ボタンの高さの半分以上の値を border-radius に指定すると、両端が半円状になったピル型のデザインになります。

以下は、CSSでピルボタンを作成するためのコード例です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background-color: rgb(193, 255, 236);
    border: none;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 30px;
    border-radius: 32px;
}
button:hover {
    background-color: #9affe1;
}
</style>
</head>
<body>
<h1>Pill Buttons Example</h1>
<button>Button 1</button>
<button>Button 2</button>
<div></div>
<button>Button 3</button>
<button>Button 4</button>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力になります。

CSSでピルボタンを作成する方法｜border-radiusの使い方を解説

コードのポイント解説

  • border-radius: 32px; … ボタンに大きな角丸を適用し、両端が半円状のピル型シェイプを作り出す最重要プロパティです。
  • background-color … ボタンの背景色を設定します。ここでは淡いミントグリーンを使用しています。
  • :hover 擬似クラス … マウスオーバー時に背景色を変化させることで、インタラクティブな操作感を演出します。
  • cursor: pointer; … ホバー時にカーソルを指マークに変更し、クリック可能な要素であることをユーザーに伝えます。
  • padding: 10px 20px; … ボタン内の余白を調整し、押しやすいサイズとバランスの良い見た目を実現します。

このように、border-radius の値を大きく設定するだけで、特別な画像や複雑なスタイルを使わずに美しいピルボタンを実装できます。配色やフォントサイズを変更すれば、さまざまなWebサイトのデザインに合わせて自由にカスタマイズ可能です。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>