がぞうボタンをホバーすると左からスワイプして文字を『詳しく見る』と表示したい。

Question

下記サイトを参考にして、ボタンを作成しています。
https://www.nxworld.net/css-ghost-button-good-chemistry-hover-effect.html

ボタンにホバーすると、左からスワイプしながら背景を白にしたのです。

もし詳しい方がいらっしゃれば教えていただけるととても助かります。

よろしくお願いします。

<div class="contact-section__btn">

<!--★ここのボタンをホバーすると左からスワイプして文字を『詳しく見る』と表示したい。  -->
<a class="button" data-hover="詳しく見る" href="#">お問い合わせへ</a>

</div>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button::after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block;
  content: attr(data-hover);
  width: 100%;
  height: 100%;
  padding: .5em 4em;
  background-color: #fff;
  color: #333;
  opacity: 0;
  transition: all .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button:hover::after {
  top: 0;
  opacity: 1;
}

Answer 1

いろいろおかしかったので、あちこち修正しました。
どこを修正したかは、元のと比べてください。

.contact-section__btn-link {
  position: relative;
  border: 1px solid #ffffff;
  margin: auto;
  width: 360px;
  height: 60px;
  line-height: 60px;
  display: flex;
  text-align: center;
  background: #333333;
  color: #ffffff;
  overflow: hidden;
}

.btn-text {
  width: 100%;
  height: 100%;
  z-index: 10;
}

.btn-hover {
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  display: block;
  background: #ffffff;
  z-index: 11;
  transition: .3s;
  color: #333333;
  opacity: 0;
}

.contact-section__btn-link:hover .btn-hover {
  left: 0;
  opacity: 1;
}

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button::after {
  position: absolute;
  top: 0;
  left: -50%;
  z-index: 2;
  display: block;
  content: attr(data-hover);
  width: 100%;
  height: 100%;
  padding: .5em 4em;
  background-color: #fff;
  color: #333;
  opacity: 0;
  transition: all .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button:hover::after {
  left: 0;
  opacity: 1;
}
body {
  background-color: navy;
}

CodePen サンプル

Comments

[退会済みユーザー]

やりたかったことができました。
ありがとうござました！

Answer 2

htmlにボタンが二つ存在していてよくわからないのですが、

.button::after {
  position: absolute;
  top: 0; /*ここを変更*/
  right: 50%; /*ここを変更*/
  z-index: 2;
  display: block;
  content: attr(data-hover);
  width: 100%;
  height: 100%;
  padding: .5em 4em;
  background-color: #fff;
  color: #333;
  opacity: 0;
  transition: all .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button:hover::after {
  right: 0; /*ここを変更*/
  opacity: 1;
}

こういうことでしょうか？

Comments

[退会済みユーザー]

はい、そうです。

Answer 3

.btn-text:hover {
  .btn-hover {
    display: block;
    width: 100%;
  }
}

↑は↓にコンパイルされます。

.btn-text:hover .btn-hover {
    display: block;
    width: 100%;
}

.btn-text と .btn-hover は兄弟なので、子孫結合子ではダメです。

.btn-text:hover {
  &+.btn-hover {
    display: block;
    width: 100%;
  }
}

としてみてはどうでしょうか？
それでも少し動きが変なように見えますので、適宜変更してください。

Comments

[退会済みユーザー]

.btn-text と .btn-hover は兄弟なので、子孫結合子ではダメです。

→そうなんですね。
削除してべつの方法を考えます。
ありがとうございます。