立体的なボタン
概要
立体的に浮き出ており、フォーカス、ホバーすると押し込まれるボタンを表現しました。
ボタンが押し込まれる感覚が楽しくなるようなアニメーションです。
ボーダーを太めに設定し、それぞれ色を調整することで表現しております。
色味が重要で、同じ色の明度が違うものをそれぞれ使うことがポイントです。
コードサンプル
HTML
<div class="btn-wrap">
<a class="btn" tabindex="0">Button</a>
</div>CSS
.btn-wrap {
--color-light: #E5E7EA;
--color-gray: #7d8797;
--color-dark: #333333;
border: 0.2em solid;
border-color: var(--color-light) var(--color-gray) var(--color-gray) var(--color-light);
transition: border-color 0.3s;
will-change: border-color;
}
.btn-wrap:has(.btn:focus-visible) {
border-color: var(--color-gray) var(--color-light) var(--color-light) var(--color-gray);
filter: brightness(0.99);
}
.btn {
display: inline-block;
padding-block: 0.4em;
padding-inline: 1em;
color: var(--color-dark);
background-color: #f4f5f9;
transition: color 0.3s, transform 0.3s;
will-change: color, transform;
line-height: 1;
}
.btn:focus-visible {
color: var(--color-gray);
transform: scale(0.98);
outline: none; // フォーカス時の枠を非表示
}
@media (any-hover) {
.btn-wrap:has(.btn:hover) {
border-color: var(--color-gray) var(--color-light) var(--color-light) var(--color-gray);
filter: brightness(0.99);
}
.btn:hover {
color: var(--color-gray);
transform: scale(0.98);
}
}