ホバー時に左から右にスライドするように色が変わる角丸ボタンを作成したい

Question

前提・実現したいこと

角丸のボタンで、ホバー時に左から右に色が変わるボタンを作成したいです。
動作はしている感じなのですが、
●色が変わらない
●なにか、めくれるように見えるので、スライドするように色を変えたい
（角丸でなく、四角ならスライドするようには見えます）
この2つの問題を解決したいです。

該当のソースコード・試したこと

★HTML

<div><div class="link"><a href="#">もっとくわしく</a></div></div>

★CSS
/* リンクボタン */
div.link{
border-radius: 35px;

}
div.link a,
div.link a{
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 18px 25px;
border-radius: 35px;
position: relative;
text-decoration: none;
z-index: 1;
transition: .3s;
background: #0087cd;
}
div.link a:hover{
color:#ffffff;

}

div.link a::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #10b5c4;
transform-origin: 0% 50%;
transform: scaleX(0);
transition: transform ease-in-out .3s;
border-radius: 35px;

}

div.link a:hover::before{
transform-origin: 0% 50%;
transform: scaleX(1);
background: #10b5c4;

}

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

諸事情により、HTMLの記述はこの形をキープしたいです。

Answer 1

下記の修正でどうでしょう。

• 背景色は親要素(div.link)につける。
• 親要素にoverflow: hidden;を設定してはみ出した部分は非表示にする。
• border-radiusは親要素だけにする。overflow: hidden;を設定しているので子要素には不要。
• スライドする背景色は親要素(div.link)の疑似要素につける。

/* リンクボタン */
div.link {
  border-radius: 35px;
  display: inline-block;
  position: relative;
  background: #0087cd;
  overflow: hidden;
}
div.link a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 18px 25px;
  text-decoration: none;
  position: relative;
  display: block;
}
div.link::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #10b5c4;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  transition: transform ease-in-out 0.3s;
}
div.link:hover::before {
  transform: scaleX(1);
}

CodePenサンプル

Comments

[murua]

前回に引き続き、早速の回答をありがとうございます！
ＰＣでは問題ないようですが、
iphoneとipadで確認すると、
①ホバーを解除しても、ホバー色のまま（両方のソース）
②ホバー時に一瞬四角になる

という現象が起こります。

②に関しては
div.link::before にも border-radius: 35px;
を足したら解決しましたが

①は力不足で解決できず・・・
ここまで解決できているので、なんとかしたいと切に思っています。

昨夜iphoneとipadで確認して、「あれ？？」って思ったのですが
PCで確認してから・ちょっと自分でもがんばってみようと思ってしまい、お返事が遅くなってしまいました・・・。
すみません。

動作の動画をアップしました！
https://www.youtube.com/shorts/QuzAYWaOc_k

[hatena19]

下記が参考になるかも。
https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html

[murua]

ありがとうございます。
じっくり読んでみます！

Answer 2

CSSに以下の記述を追加でいけました！

• Demo: https://jsfiddle.net/5qfb264d/

/* リンクボタン */
div.link {
  display: inline-block; /* 追加 */
  border-radius: 35px;
  overflow: hidden; /* 追加：はみ出た子要素は非表示 */
}

div.link a,
div.link a {
  display: block; /* 追加 */
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 18px 25px;
  border-radius: 35px;
  position: relative;
  text-decoration: none;
  z-index: 1;
  transition: .3s;
  background: #0087cd;
}

Comments

[murua]

回答、ありがとうございます。
ＰＣでは問題ないようですが、
iphoneとipadで確認すると、
ホバーを解除しても、ホバー色のまま（両方のソース）

という現象が起こります。

これはなんでしょう・・・・？？
いろいろ探ってもみましたが、そもそも作れないので、やっぱり解決できません・・・。

https://youtube.com/shorts/xgA71JDl7UM
現象をこちらにアップしてみました！

昨夜iphoneとipadで確認して、「あれ？？」って思ったのですが
PCで確認してから・ちょっと自分でもがんばってみようと思ってしまい、お返事が遅くなってしまいました・・・。
すみません。

[Cocode]

hoverはカーソル操作のデバイスのみです！カーソルなどが上に乗ったときに起こる現象ですよね？
タッチデバイスはhoverはありませんー！

その対策、回答編集しておくりますね

[Cocode]

とおもったら、hatena19さんが紹介してくれていたので、その記事の通りでいいと思います。
多分一番簡単なのは外部JSに

document.querySelector('body').setAttribute('ontouchstart', '');

をかいて、そのJSファイルを全部のCSSで読み込むことだと思います。

[murua]

そうなんですね。タッチデバイスにはホバーの概念がないのですね。（素人・・・・）

[Cocode]

ないのですよー。なのでcssだけで対応させようとするとメディアクエリを使って、タッチデバイスでは:active、マウス操作デバイスでは:hoverでスタイルがつくように書き分けるんですけど、なかなか面倒ですー。
ピュアCSSで書くなら、同じ記述2回書かないといけないですし😂

Answer 3

スマートフォンやタブレットでは、ホバーという概念がないことを知らずに質問してしまい、申し訳ございませんでした。javaScriptはどうしても入れたくない、hoverでなくactiveの記述を加えることがNGという条件下ですので、結局スマートフォンのほうでのボタンアニメーションはあきらめました。
で、いろいろ調べていて、スマートフォンの動作をあきらめると、最初提示したCSSよりも、もう少しシンプルなCSSの記述でできることがわかったので、CSSも書き換えました。
PCでは色が変わり、スマートフォンでは、特に動きがないので、これが妥協案として適当なのかなあと思っています。
ただ、お二人の案や参考サイトがなければ、ここまでたどり着けなかったので、感謝しています！ありがとうございました。
ベストアンサーは、本当はお二人に付けたかったのですが、１人だけなので、今回初めてレスをくださったＣｏｃｏｄｅさんにいたしました。hatena19さんも前回に引き続きありがとうございました。

ちなみに、最終的なソースは以下の通りです。

<style> /* リンクボタン */ .link{ border-radius: 35px; position: relative; background: #0087cd; overflow: hidden; } .link a{ color: #fff; font-size: 16px; font-weight: bold; padding: 18px 25px; text-decoration: none; position: relative; display: block; z-index:10; border-radius: 35px; } .link ::before { content: ""; width: 100%; height: 100%; position: absolute; top:0; left:0; background: #10b5c4; transform-origin: 0% 80%; transform: scaleX(0); transition: transform ease-in-out 0.3s; border-radius: 35px; z-index:-10; } .link :hover::before, .link:active::before{ transform: scaleX(1); border-radius: 35px; z-index:-10; } </style> <div class="link"><a href="#">くわしくはこちら</a></div>