狼読

 
2020/04/27

[css]hoverをした時にボタンの下から背景が出るようにしてみよう

今回は、hoverをした時にボタンの下から背景が出るようにしてみる物を作ってみようと思います。一体どんなもんだ?って思うかと思いますが動作は非常にシンプルです。hoverした際に、before要素が上にかぶさってくるといったものです。

HTMLの構造

今回は、ボタンを作ってその上に黒い透過の画面がかかるような物を作ってみようかと思います。

<div class="hover_btn">背景に透過画面がかかる</div>
このようにシンプルな物にしようと思います。beforeとafterを上手に使って色々やって見ましょう。

CSSのご紹介

まずは上記のHTMLをボタンのようなデザインにしてみようと思います。

<style>
.hover_btn1{
 width:300px;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

上述のcssを当てたものが下のものになります。
少しボタンらしくなりましたね。

サンプル実装例

背景に透過画面がかかる

次はhover時のアクションを追加していきましょう。
まずは、beforeの要素を作って、上にかぶせるブロックを作成しましょう。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
 margin-bottom:50px;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

背景に透過画面がかかる

position:relativeとposition:absoluteを使ってこのようにボタンに下にbeforeでブロックを作成します。このままでは、下のブロックが見えたままになってしまいますね。そのため次のようにブロックからはみ出た場合は、hiddenすると良いでしょう。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
  overflow:hidden;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

背景に透過画面がかかる

先ほどまであった、赤いbefore要素のブロックが見えなくなってしまいましたね。では、このbeforeの要素をhoverした時に上のブロックに移動するようにtopを移動させて見ましょう。この際transitionを使用するとアニメーションのように移動します。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
 overflow:hidden;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
 transition:1s all;
}
.hover_btn:hover:before{
 top:0;
 transition:1s all;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

hiddenしてない際の動作。(hoverすると動きます。)

背景に透過画面がかかる

hiddenさせた場合の動作(hoverすると動きます。)

背景に透過画面がかかる

このようにボタンをhoverした際に背景が透過したブロックが被さるようになりましたね。

まとめ

今回は、cssを使って背景がhoverした際に動くような物を作成いたしました。position:relativeとposition:absoluteを使ってbeforeの要素を動かすことで実現しています。今回は下から動いてくるというものですが、left,rightなど様々な方向から動かすことも可能になります。ぜひいろんな場面で試して見てください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

2020/03/12

[css]背景色を真ん中のところできっちり2色にして背景をツートンカラーにしてみよう

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読