押されたボタンが小さくなるようにする方法

前提・実現したいこと

ボタンを押したときにへこませたいのですが、四方八方から全体的に縮むように見せたいです。
「目指しているやり方」

「前に失敗したやり方」

該当のソースコード

HTML
1・・・・・
2<button onclick="location.href='https://www.airbnb.jp/s/homes?location_search=NEARBY&search_type=HOMEPAGE_BANNER'">近場の宿泊先を探す</button>
3・・・・・

CSS
1・・・・・
2.button {
3  border-radius: 255px;
4}
5・・・・・

試したこと

あらかじめCSSにボタンの下に影を付けておいて、ボタンが押されるとその影が消えた事で目の錯覚によりボタンがへこんで見えるという、box-shadowの方法があるのは分かりました。ただ、作ろうと思っている当該サイトのボタンは錯覚で動いているように見せかけているのではなく、ボタンを押すとちゃんとサイズが縮むようになっていました。それを再現してみたいのですが、ボタン自体を小さくするためのCSSの記述の仕方がわかりません。方法を教えていただけると、うれしいです。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

https://www.airbnb.jp/を見てきましたが、以下のようになっていました。

html
1<span class="_jo65ru">
2  <a target="_blank" href="/s/homes?location_search=NEARBY&amp;search_type=HOMEPAGE_BANNER" class="_l4xrxlj">
3    <span class="_8adyrf" style="--tl-font-weight:600;">近場の宿泊先を探す</span>
4  </a>
5</span>

css
1._l4xrxlj:active {
2	transform: scale(0.96) !important;
3	border-color: rgb(0, 0, 0) !important;
4	background: rgb(247, 247, 247) none repeat scroll 0% 0% !important;
5	color: rgb(34, 34, 34) !important;
6}