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

前提・実現したいこと

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

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

★HTML

もっとくわしく

★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の記述はこの形をキープしたいです。