ホバー時に文字が消えてしまいます。

Question

ホバー時にpushの文字が消えてしまいます。
どうすればようでしょうか。

a.btn-border {
border: 2px solid #000;
border-radius: 0;
background: #fff;
color: #000;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;
}

a.btn-border:before {
position: absolute;
top: 0;
left: 0;

width: 15px;
height: 100%;

content: '';
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);

border-radius: 0 50% 50% 0;
background: #000;
color: #000 !important;
}

a.btn-border:hover:before {
font-family: 'Font Awesome 5 Free';
font-weight: bold;
line-height: 30px;

width: 30px;
height: 30px;

content: '\f061';
-webkit-transform: translateX(460%) translateY(.5rem);
transform: translateX(460%) translateY(.5rem);
color: #000 !important;
border-radius: 50%;
}

<a href="" class="btn btn-border">PUSH！</a>

Comments

[Lhankor_Mhy]

ご提示のコードを試してみました、PUSHは消えませんでした。
つまり、問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/r6zyc7h4/

ご提示いただいていない部分のコードが原因かもしれません。

[退会済みユーザー]

ご回答いただきありがとうございます。
ご教示いただいた内容ですと、他のコードが悪さをしている可能性があるかもしれません。
一応、当該サイトはこちらになります。恐れ入りますがよろしくお願いいたします。
http://tabizukan-backpacker.com/

[Lhankor_Mhy]

ご提示のページを拝見しました。
そちらでは「PUSH」という文字がなかったので、開発者ツールで差し込みましたところ、問題なく表示されました。
つまり、問題が再現しませんでした。

問題が再現するコードをご提示ください。

Answer 1

下記の場所は必要なのでしょうか?
translateXの値を5％から徐々に大きくしていくといったことは試してみましたか？

a.btn-border:hover:before {
    -webkit-transform: translateX(460%) translateY(.5rem);
    transform: translateX(460%) translateY(.5rem);
}

CSSは各スタイルの相互作用があるので、単純にコピペする前に、一度スタイルの構成を調べてから適用すると勉強にもなりますしいいですよ。

あと、質問する時は下記内容を書くと回答しやすいです。

• 実現したいこと
• 調べたこと、試したこと

テンプレートの基本テンプレートを使うと質問しやすいですよ。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
今一度スタイルを調べてきたところではございますが、一体どのコードが悪さをしているのか分かりかねるところがございます・・・。
http://tabizukan-backpacker.com/