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

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

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

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

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

沈むボタンその1

borderを背景色と同じ色にし、マウスを乗せたとき、border-bottomとborder-topの太さを逆にすることで伸び縮みさせています。

ボタン

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

margin-bottomで下に空白を作っておき、マウスを乗せたとき、margin-bottomを0にし、その分margin-topに移します。

ボタン

html

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

CSS

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

沈むボタンその4

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

ボタン

html

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

CSS

<style>   
.button4{
    display: block;
    width: 200px;
    text-decoration: none;
    background: #cbdef4;
    border: 2px solid #3c7cc6;
    text-align: center;
    font-size: 150%;
    margin: 0 0 10px;
    transition: .3s;
    padding: 20px;
}
.button4:hover{
    margin: 10px 0 0;
    /*コレを追加*/padding: 20px 20px 10px;
}

まとめ

borderとpadding、marginで上下や高さを変化させることで沈むように表現できます。

以上、沈むボタン,へこむボタンの作り方でした。