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

CSSで垂直ボタングループを作成する方法【サンプルコード付き】

CSSを使えば、複数のボタンを縦方向に連結した「垂直ボタングループ」を簡単に作成できます。ポイントは、コンテナに display: inline-block を指定し、各ボタンを display: block と width: 100% で積み重ねることです。以下に具体的な実装例を紹介します。

コード例

<!DOCTYPE html>
<html>
<style>
*,*::before,*::after{
    box-sizing: border-box;
}
.btnGroup{
    display: inline-block;
    font-size: 0;
    border: 2px solid darkgreen;
    box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button{
    display: block;
    width: 100%;
    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-bottom: 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で垂直ボタングループを作成する方法【サンプルコード付き】

コードの解説

  • .btnGroup：display: inline-block でグループ全体をまとめて配置し、font-size: 0 によってボタン間に生じる不要な余白を除去しています。さらに濃い緑の枠線と影で立体感を演出しています。
  • button：display: block と width: 100% を指定することで、各ボタンがコンテナの幅いっぱいに広がり、縦方向へきれいに積み重なります。
  • button:not(:last-child)：最後のボタン以外の下側に境界線を引くことで、ボタン同士の区切りを明確にしています。
  • button:hover：マウスホバー時に背景色・文字色・影を切り替えることで、インタラクティブで操作しやすいUIを実現しています。
  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

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

  2. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>