【html･CSS】画像の上にボタンを重ねる方法

画像を置き、その上にボタンを重ねたいときありますよね。

画像の上にボタンを重ねる方法を解説します。

もちろんレスポンシブ対応です。

display:flexで重ねる方法、position:absoluteで重ねる方法があり、さらに画像全体をクリックできる方法、ボタンだけクリックできる方法の4種を紹介します。

flexはbackground-image、positionはimgに向いています。

flexで重ねて画像全体をクリック

重ねたいボタン

<style>
.example{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
    height: 300px;
    text-decoration: none;
}
.example>span{
    display: block;
    width: 200px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.3);
    border: 1px solid #FFF;
    padding: 15px;
    text-align: center;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    transition: .3s;
}
.example:hover>span{
    background: rgba(255,255,255,1);
    color: #333;
}
</style>
<a href="#" class="example">
    <span>重ねたいボタン</span>
</a>

display: flexは子要素の位置調整ができるCSSです。

flexとセットで使えるjustify-contentは横方向を、align-itemsは縦方向を調整できます。

display:flexについて詳しくはこちら↓

画像はbackgroundで背景にします。

画像全体をクリックできるようにするため、画像がaタグとなっています。

text-decorationなどはこのaタグに指定するといいでしょう。

子要素にspanを置き、ボタンとしています。divでもOKです。

ボタンをaタグにしてはいけません。aタグの中にaタグを置くことはできず、崩れてしまいます。

hoverアクションは画像の上（クリック範囲）にマウスが乗ったときに発動させるため「a:hover>span」としています。

flexで重ねてボタンだけクリック

<style>
.example2{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
    height: 300px;
}
.example2>a{
    display: block;
    width: 200px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.3);
    border: 1px solid #FFF;
    padding: 15px;
    text-align: center;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    transition: .3s;
    text-decoration: none;
}
.example2>a:hover{
    background: rgba(255,255,255,1);
    color: #333;
}
</style>
<div href="#" class="example2">
    <a href="#">重ねたいボタン</a>
</div>

基本的に先の「flexで重ねて画像全体をクリック」する方法と同じですので、違いだけ説明します。

まずhtmlが違います。先はaタグを画像としていましたが、今回はdivを画像としています。その上でボタンをaタグにします。クリック範囲をボタンだけにするためです。

これに伴い、CSSのセレクタも変わります。

hoverアクションは画像の上ではなく、ボタン（クリック範囲）にマウスが乗ったときに発動させるため「div>a:hover」としています。

text-decorationはaタグになるよう移動しています。

positionで重ねて画像全体をクリック

重ねたいボタン

<style>
.example3{
    display: block;
    position: relative;
}
.example3 img{
    width: 100%;
    height: auto;
    display: block;
}
.example3>span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 200px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.3);
    border: 1px solid #FFF;
    padding: 15px;
    text-align: center;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    transition: .3s;
}
.example3:hover>span{
    background: rgba(255,255,255,1);
    color: #333;
}
</style>
<a href="#" class="example3">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <span>重ねたいボタン</span>
</a>

「画像を見切らせたくない」「imgでどうにかやりたい」「flexでどうもうまくいかない」というときはimgにposition:absoluteで重ねましょう。

クリック範囲となるaタグの中にimgとボタンを配置します。

このaタグにposition: relativeを指定し基準とします。

ボタンにposition: absoluteを指定します。

leftとtopを50%に指定します。しかしこれだけでは重ねたいボタンの右上部分が中央になりボタン全体としては ずれてしまいます。

「transform: translate(-50%,-50%)」を指定することでこのずれを戻し上下左右中央寄せができます。

positionについて詳しくはこちら↓

hoverアクションは画像の上（クリック範囲）にマウスが乗ったときに発動させるため「a:hover>span」としています。

画像はimgですが、imgのサイズとその親要素であるaタグのサイズが同じですのでこの指定にしています。

imgはそのままだと下に少し隙間ができてしまいます。display: blockを指定すれば解消できます。

positionで重ねてボタンだけクリック

<style>
.example4{
    display: block;
    position: relative;
}
.example4 img{
    width: 100%;
    height: auto;
    display: block;
}
.example4>a{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 200px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.3);
    border: 1px solid #FFF;
    padding: 15px;
    text-align: center;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    transition: .3s;
    text-decoration: none;
}
.example4>a:hover{
    background: rgba(255,255,255,1);
    color: #333;
}
</style>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    <a href="#">重ねたいボタン</a>
</div>

基本的に先の「positionで重ねて画像全体をクリック」する方法と同じですので、違いだけ説明します。

まずhtmlが違います。先はaタグを親要素としていましたが、今回はdivを親要素としています。その上でボタンをaタグにします。クリック範囲をボタンだけにするためです。

これに伴い、CSSのセレクタも変わります。

hoverアクションは画像の上ではなく、ボタン（クリック範囲）にマウスが乗ったときに発動させるため「div>a:hover」としています。

text-decorationをaタグに追加しています。

【まとめ】画像の上にボタンを重ねる方法

画像の上にボタンを重ねる方法は2つ

• 背景画像に重ねるならdisplay:flex
• img画像に重ねるposition:absolute

クリック範囲とaタグについて

• 画像全体をクリックできるようにするなら親要素をaタグにする、ボタンはaタグ以外にする。
• ボタンだけクリックできるようにするなら親要素はaタグ以外にし、ボタンをaタグにする。

以上、html･CSSで画像の上にボタンを重ねる方法でした。