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

CSSでボタングループを作成する方法をサンプルコード付きで解説

CSSを使えば、複数のボタンを横一列に連結した「ボタングループ」を簡単に作成できます。本記事では、ホバー時のエフェクトも含めたボタングループの実装方法を、実際のコード例とともにわかりやすく解説します。

ボタングループの作成例

以下は、CSSでボタングループを作成するコード例です。

<!DOCTYPE html>
<html>
<style>
.btnGroup{
   display: inline-block;
   font-size: 0;
   border: 2px solid darkgreen;
   box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button{
   float: left;
   margin:0px;
   border:none;
   padding: 15px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: bold;
   font-size: 20px;
}
button:not(:last-child){
   border-right: 2px solid rgb(6, 134, 49);
}
button:hover{
   background:rgb(48, 24, 134);
   box-shadow: 5px 10px 18px rgb(41, 39, 173);
   color:white;
}
</style>
<body>
<h1>Button Group</h1>
<div class="btnGroup">
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
</div>
<h2>Hover over the above button group to see hover effects</h2>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでボタングループを作成する方法をサンプルコード付きで解説

ボタングループ内のいずれかのボタンにマウスカーソルを合わせると、以下のようにホバー効果が表示されます。

CSSでボタングループを作成する方法をサンプルコード付きで解説

コードのポイント解説

1. ボタン間の余白をなくすテクニック

親要素の .btnGroup に font-size: 0 を指定することで、インライン配置時に発生するボタン間の意図しない隙間を防いでいます。

2. ボタンを横並びにする

各 button 要素に float: left を指定し、ボタンを左寄せで横一列に並べています。また margin: 0 で余白をリセットし、ボタン同士をぴったりと隣接させています。

3. 区切り線の実装

button:not(:last-child) セレクタを使うことで、「最後のボタン以外」にのみ右側の境界線を適用しています。これにより、グループ全体の外枠と重ならない自然な区切り線が実現できます。

4. ホバー時のエフェクト

:hover 疑似クラスを使用し、マウスオーバー時に背景色・文字色・ボックスシャドウを変化させています。ユーザーにとって視覚的に分かりやすいインタラクティブな演出となります。

まとめ

このように、float と :not(:last-child)、:hover を組み合わせるだけで、区切り線付きの美しいボタングループを作成できます。ツールバーやナビゲーションメニューなど、さまざまな場面で応用できるテクニックなので、ぜひ活用してみてください。

  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>