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

CSSで通知バッジ付きボタンを作成する方法【コード例付き】

CSSを使えば、通知件数を示すバッジ（数字）が付いたボタンを簡単に作成できます。ポイントは、親要素に position: relative; を指定し、バッジ側に position: absolute; を指定して右上に配置することです。以下に、実際に動作するサンプルコードを紹介します。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
    font-family: monospace,serif,sans-serif;
}
.notificationContainer {
    margin: 20px;
    background-color: rgb(254, 255, 171);
    color: black;
    text-decoration: none;
    padding: 15px 26px;
    font-size: 32px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
    border:2px solid black;
}
.notificationContainer:hover {
    background: rgb(43, 8, 138);
    color:white;
}
.notificationContainer .notificationBadge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    background-color: rgb(0, 170, 51);
    color: white;
}
</style>
</head>
<body>
<h1>Notification Button Example</h1>
<a href="#" class="notificationContainer">
<span>Messages</span>
<span class="notificationBadge">99+</span>
</a>
</body>
</html>

出力結果

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

CSSで通知バッジ付きボタンを作成する方法【コード例付き】

ホバー時の動作

メッセージボタンにマウスカーソルを合わせると、:hover 疑似クラスによって背景色が濃い青紫に、文字色が白へと変化します。

CSSで通知バッジ付きボタンを作成する方法【コード例付き】

コードのポイント

  • .notificationContainer：ボタン本体となる要素です。position: relative; を指定することで、バッジを絶対配置する際の基準位置になります。
  • .notificationBadge：通知数を表示する緑色の丸いバッジです。position: absolute; と top: -10px; right: -10px; を組み合わせることで、ボタンの右上外側にはみ出すように配置しています。
  • border-radius: 50%;：バッジをきれいな円形にするために使用しています。
  • :hover：マウスオーバー時に背景色と文字色を切り替えることで、ユーザーに操作可能であることを直感的に伝えます。

この手法はメッセージアプリやSNSなど、未読件数を視覚的に伝えたいUI全般に応用できるため、覚えておくと非常に便利です。

  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>