CSSのボタン装飾がうまくいかない

Question

cocoonを使ってwordpress運営しています。ボタンをCSSで装飾しようとしたのですが、一部が打ち消されてうまくいきません。

:activeの場所を変更されると打ち消しの位置も変わるしお手上げです。

どこが悪いのでしょうか。

.btn-push,.btn-push2 {
  display: inline-block;
  max-width: 180px;
  text-align: left;
  font-size: 16px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 4px;
}

.btn-push {
	background-color: #EE2737;
	border-bottom: 6px solid #880000;
}
.btn-push2 {
	background-color: rgb(5,42,131);
	border-bottom: 6px solid #000077;
}

.btn-push,.btn-push2:active {
    transform: translateY(6px);
    border-bottom: none;
}

<p style="text-align: center;"><a class="btn-push" href="https">play</a></p>
<p style="text-align: center;"><a class="btn-push2" href="" target="_blank">play</a></p>

Comments

[m.ts10806]

コードを画像で提示されても現象確認できませんので、テキストでマークダウンのcode機能にてご提示ください。
https://teratail.com/questions/238564

> cocoonを使ってwordpress運営しています。
「WordPress」タグを質問に追加してください。
単にcssだけで対応しきれるとは限りません。

[-millmill-]

ソースが画像では検証できませんので
問題個所に関わる部分のhtmlとcss両方を
コードペイン(アイコンの<code>)内に直打ちしないと
回答が得にくくなると思いますよ

[programing837]

編集しましたが、どうでしょうか。

Answer 1

ボタンをクリックしたときに沈みこませたいということでしょうか。

現状だと、下のボタンだけ沈みこんでいるので、上も同様にしたいということでしょうか。

だとしたら、active の部分を下記のように修正してください。

.btn-push:active,.btn-push2:active {
    transform: translateY(6px);
    border-bottom: 6px solid transparent;
}

border-bottom: none; にするとその分下の要素が上に移動しますので、幅は変更せずに透明にするだけにした方がいいでしょう。

Comments

[programing837]

ありがとうございます！

Answer 2

.btn-push:active,.btn-push2:active {
    ~ ~
}

.btn-push に :active が抜けていただけでは?

Comments

[programing837]

ありがとうございます！