css

cssで書いたボタンをhover時にへこむようにする方法です。

投稿日:2021年3月9日 更新日:

Pocket

うも、チャーさんです。

 

あなたはcssを使って作ったボタンを、

hover(マウスをボタンの上に持って来ること)

時にへこむようにしたいですか?

 

この記事を読めば、あなたもcssでボタンを

hover時にへこむようにすることができますよ!

 

スポンサードサーチ

cssで書いたボタンをhover時にへこむようにする方法

 

 

で、早速ですが、cssでボタンをへこむように

するには、必要なものがあります。

 

それは、box-shadowです。

なので、これをあなたのボタンのcssに

付け加えてください。

 

 

僕が作った例を用意したので

これをコピペでもokです。

 

box-shadow:1px 7px 2px 1px black;

 

でつけるとボタンの下に影ができましたよね?

 

 

この影をhover時に消して、

ボタンの位置を下にずらすことで、

 

あたかもボタンがへこむ様に

見せることができるのです!

 

 

で影を消すにはですが、

以下の様にかくといいです。

 

要素名:hover {

box-shadow:1px 0px 2px 1px black;

}

こうするとhoverさせると、

ボタンの下にある影が消えます。

 

 

で何が違うかと言いますと、

 

box-shadow:1px 7px 2px 1px black;

box-shadow:1px 0px 2px 1px black;

 

7pxのとこが0pxになってますよね。

この部分がボタンの下の影になります。

 

 

なのでちょいと余談ですが、この数値をいじれば、

あなたの好きな様に影のながさを変えれます。

 

で、話戻りますが、

このままではまだ、ボタンはへこむ様には、

見えません。

 

ただ影が消えるだけです。

 

 

でここに、ボタンが下に動くcssを

書きます。

それが以下です。

 

position:relative;
top:8px;

 

こいつをhover{}

の中に描いてください。

 

 

こうするとボタンが下に動いて、

ボタンがへこむ様に見えます。

 

ちなみにこれは、

positionを使って、

ボタンの位置を下に8px分動かすことで、

 

hover時に、ボタンがへこむ様に見えるという、

記述です。

 

スポンサードサーチ

まとめ

 

さて以上で、cssでボタンをへこむ様にする

ことができます。

 

また、上記を読んでも、

ちょっと何言ってるかわかんないって

場合は、下の記述をhtmlファイルにコピペしてください。

 

 

するとボタンが出てきて、

hover時にへこむ様になってます。

 

<html>
<head>
<style>

.box1 {
width:200px;
height:100px;
border-radius:10px;
background-color:green;
margin-top:50px;
margin-left:50px;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:30px;
box-shadow:1px 7px 2px 1px black;

}
.box1:hover {
background-color:limegreen;
position:relative;
top:8px;
box-shadow:1px 0px 2px 1px black;
}

</style>
</head>
<body>
<div class=”box1″>
ボタン
</div>
</body>
</html>

 

ということで、どぞ。

 

さてということで、cssでボタンを

hover時にへこむようにする方法でした。

 

それでは、楽しいcssコーディングを〜

チャーさん。

-css


スポンサードサーチ

関連記事

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。