ホームへ

CSS 沈むボタンの作り方4種【コピペでOK】

ボタンにマウスを乗せたら沈むとボタンっぽいですよね。

沈むボタンの作り方を説明します。

ただし、何も考慮せずに作ると沈んだり戻ったりカクカクするボタンになってしまうことがあります。

カクカクしないようマウスを乗せる前と乗せた後でクリック可能範囲を同じにする工夫をしています。

沈むボタンその1

borderを背景色と同じ色にして伸び縮みさせています。

ボタン

html

<a href="#" class="button">ボタン</a>

CSS

.button{
    background: #3c7cc6;
    display: block;
    width: 200px;
    text-align: center;
    font-size: 150%;
    color: #FFF;
    margin: 10px auto;
    text-decoration: none;
    transition: .3s;
    padding: 20px;
    border-bottom: 10px solid #FFF;
    border-top: 0px solid #FFF;
}
.button:hover{
    border-bottom: 0px solid #FFF;
    border-top: 10px solid #FFF;
}

沈むボタンその2

基本は「その1」と同じですが、マウスを乗せたときpadding-bottomを縮めることで上だけ引っ込んで沈んでいる表現をしています。

ボタン

html

<a href="#" class="button2">ボタン</a>

CSS

.button2{
    background: #3c7cc6;
    display: block;
    width: 200px;
    text-align: center;
    font-size: 150%;
    color: #FFF;
    margin: 10px auto;
    text-decoration: none;
    transition: .3s;
    padding: 20px;
    border-top: 0px solid #FFF;
}
.button2:hover{
    border-top: 10px solid #FFF;
    padding: 20px 20px 10px;
}

沈むボタンその3

「その1」「その2」はborderで上下させていたのでborderが使えませんでした。
「その3」はhtmlにspanタグが増やすことでborderが使えます。

ボタン

html

<a href="#" class="button3"><span>ボタン</span></a>

CSS

.button3{

    display: block;

    width: 200px;

    margin: 10px auto;

    text-decoration: none;

    padding: 1px;

}

    .button3 span{

    background: #cbdef4;

        border: 2px solid #3c7cc6;

    display: block;

    text-align: center;

    font-size: 150%;

    margin: 0 0 10px;

    transition: .3s;

    padding: 20px;

}

.button3:hover span{

    margin: 10px 0 0;

}

沈むボタンその4

基本は「その3」と同じですが、マウスを乗せたときpadding-bottomを縮めることで上だけ引っ込んで沈んでいる表現をしています。

ボタン

html

<a href="#" class="button4"><span>ボタン</span></a>

CSS

.button4{
    display: block;
    width: 200px;
    margin: 10px auto;
    text-decoration: none;
    padding: 1px;
}
.button4 span{
    background: #cbdef4;
    border: 2px solid #3c7cc6;
    display: block;
    text-align: center;
    font-size: 150%;
    margin: 0;
    transition: .3s;
    padding: 20px;
}
.button4:hover span{
    margin: 10px 0 0;
    padding: 20px 20px 10px;
}

まとめ

沈むボタンを4つ紹介しました。
borderかmarginで沈むように表現できます。
使いやすいのを使ってみてください。

マンガで読める関連記事