ホバー時に影が変化する13個のCSSボタンまとめ

@ハクト 2023-07-25 18:19:20に投稿

今回はホバー時、影が変化するボタンを13個まとめました。

主に「box-shadow」「transform」プロパティを使用して影やボタンの位置を変化させています。

お気に入りのボタンがあればぜひ活用してみてください。

ホバー時に影の線を太くするボタン

ホバー時に「boder」の太さを変えてます

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    position: relative;
    padding: 1rem 3rem;
    cursor: pointer;
    border: 3px solid #212121;
    background-color: #fdf731;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn::before {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 100%;
    height: 100%;
    border-right: 3px solid #212121;
    border-bottom: 3px solid #212121;
    transition: .3s;
    content: '';
}

.btn:hover::before {
    border-right-width: 7px;
    border-bottom-width: 7px;
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に影を表示しクリックで沈むボタン

ホバー時に「box-shadow:5px 5px #353535;」で影を出し、クリック時に「translate」で移動し「box-shadow:0 0;」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    background-color: #abd6c5;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 5px 5px #353535;
}

.btn:active {
    box-shadow: 0 0;
    transform: translate(5px, 5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に下側に影を表示しクリックで沈むボタン

ホバー時に「box-shadow:0px 5px #353535;」で下側に影を出し、クリック時に「translate」で移動し「box-shadow:0 0;」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    background-color: #aed3a9;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 0px 5px #353535;
}

.btn:active {
    box-shadow: 0 0;
    transform: translate(0px, 5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にぼかした影を表示しクリックで沈むボタン

ホバー時に「box-shadow:0px 0px 10px #353535;」で下側に影を出し、クリック時に「box-shadow:0 0;」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border: 3px solid #353535;
    background-color: #d1cfa9;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 0px 0px 10px #353535;
}

.btn:active {
    box-shadow: 0 0;
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に影を表示しクリックで沈む角を四角にしたボタン

ホバー時に「box-shadow:5px 5px #353535;」で影を出し、クリック時に「box-shadow:0 0;」と「transform」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border: 3px solid #353535;
    background-color: #a7c8ce;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 5px 5px #353535;
}

.btn:active {
    box-shadow: 0 0;
    transform: translate(5px, 5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に奥に傾きクリックで沈むボタン

ホバー時に「transform:perspective(300px) rotateX(30deg)」で奥行きを出して傾け、クリック時に「box-shadow:0 0;」と「transform」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    background-color: #c4a7cc;
    box-shadow: 5px 5px #353535;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    transform: perspective(300px) rotateX(30deg);
}

.btn:active {
    box-shadow: 0 0;
    transform: perspective(300px) rotateX(30deg) translate(5px, 5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に影を表示しクリック時に沈む3D風ボタン

ホバー時に「box-shadow: 0px 10px #353535;」で影を出し、クリック時に「box-shadow:0 0;」と「transform」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    background-color: #e5ea44;
    transform: perspective(300px) rotateX(30deg);
    transition: .5s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 0px 10px #353535;
}

.btn:active {
    box-shadow: 0 0;
    transform: perspective(300px) rotateX(30deg) translate(0px, 10px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ニューモフィズムにしたボタン

ホバー時に影の幅を変え、クリック時に「box-shadow:0 0;」と「transform」で沈んだようにしています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

/* コンテンツの背景色を#efefefに設定してください */
.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    background: #efefef;
    box-shadow: 20px 20px 50px #cbcbcb,
        -20px -20px 50px #ffffff;
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    transition: .3s;
}

.btn:hover {
    box-shadow: 5px 5px 30px #cbcbcb,
        -5px -5px 30px #ffffff;
}

.btn:active {
    box-shadow: 0 0;
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にテキストに影がつくボタン

ホバー時に「text-shadow:」でテキストに影を入れてます

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    background-color: #6bce87;
    border: 3px solid #353535;
    transition: .3s;
    color: #353535;
    font-weight: bold;
}

.btn:hover {
    color: #fff;
    text-shadow: 0px 5px 3px #222, 0px 2px #222;
}

.btn:active {
    text-shadow: 0 0;
    color: #353535;
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に浮き上がりクリックで沈むボタン

ホバー時「box-shadow」で影を増やし、「translateY」で浮き上がるようにしています

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    box-shadow: 0px 5px #353535;
    background-color: #f4c8cb;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 0px 10px #353535;
    transform: translateY(-5px);
}

.btn:active {
    box-shadow: 0 0;
    transform: translateY(5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時に複数の影を入れたボタン

ホバー時「box-shadow」で複数の影を入れ、クリック時に「translate」で沈むようにしています

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    border: 3px solid #353535;
    background-color: #c6e2f2;
    transition: .3s;
    color: #333;
    font-weight: bold;
}

.btn:hover {
    box-shadow: 5px 5px 2px #353535, 10px 10px 2px #838383, 15px 15px 2px #d4d4d4;
}

.btn:active {
    box-shadow: 0 0;
    transform: translate(5px, 5px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時にグラデーションをぼかしたボタン

ホバー時「filter:blur」でグラデーションをぼかし、クリック時に元に戻しています。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    position: relative;
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    background-color: #fff;
    transition: .3s;
    color: #353535;
    font-weight: bold;
}

.btn::before {
    position: absolute;
    inset: -2px;
    margin: auto;
    border-radius: 10px;
    background-image: linear-gradient(45deg, #f336f7 10%, #f7d836 90%);
    transition: .3s;
    z-index: -1;
    content: '';
}

.btn:hover::before {
    inset: -5px;
    filter: blur(10px);
}

.btn:active::before {
    inset: -2px;
    filter: blur(0px);
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ホバー時、下側にグラデーションの影を入れたボタン

ホバー時「bottom」を指定し要素下部のグラデーションを広げてます。

コードを表示

<a class="btn">
    CSSボタン
</a>

 

.btn {
    position: relative;
    padding: 1rem 3rem;
    cursor: pointer;
    border-radius: 10px;
    background-color: #fff;
    transition: .3s;
    color: #353535;
    font-weight: bold;
}

.btn::before {
    position: absolute;
    inset: -2px;
    margin: auto;
    border-radius: 10px;
    background-image:
        linear-gradient(150deg, #36daf7 10%, #cb36f7 90%);
    transition: .3s;
    z-index: -1;
    content: '';
}

.btn:hover::before {
    bottom: -8px;
}

.btn:active::before {
    bottom: -10px;
}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

PR

フリーランスエンジニアに安心保証
動画編集入門プラン（2ヶ月）用LP
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter