cssで作ったボタンのホバーアニメーションが動かない

アニメーションのあるボタンを作ろうとしていますが、アニメーションが作動しません。
二重線で、ホバーすると内側のみアニメーションで囲み枠が動くタイプのボタンです。
cssを記述したものの、アニメーションが作動せず解決方法もわからず、作業が止まってしまいました。

また、コードもぐちゃぐちゃで恥ずかしい限りです。
cssにお詳しい方、どうかご教授ください。
どうぞ、よろしくお願いいたします。

ボタンのイメージは、下記のサイトに使用されているようなイメージです。
→参考：ボタンが使用されている参考サイト

html
1
2<div class="qodef-m-button">
3<a class="qodef-shortcode qodef-m  qodef-button qodef-layout--outlined  qodef-html--link" href="https://chea.qodeinteractive.com/price-list/" target="_self">
4  <span class="qodef-m-border--top-right"></span>
5  <span class="qodef-m-border--bottom-left"></span>
6  <span class="qodef-m-text">View more </span></a>
7</div>

css
1/* ----- ボタン　View more ----- */
2
3.qodef-section-title .qodef-button.qodef-layout--outlined {
4    margin: 42px 0 0;
5}
6
7.qodef-button.qodef-layout--outlined {
8    color: #fff;
9    background-color: transparent;
10    border: 1px solid #fff;
11    will-change: transform;
12    position: relative;
13    overflow: visible;
14    will-change: transform;
15}
16
17.qodef-button.qodef-html--link {
18    position: relative;
19    display: inline-block;
20    vertical-align: middle;
21    width: auto;
22    margin: 0;
23    font-family: "Cormorant Garamond",sans-serif;
24    font-size: 19px;
25    letter-spacing: .035em;
26    line-height: 2em;
27    font-weight: 400;
28    text-decoration: none;
29    font-style: italic;
30    border-radius: 0;
31    outline: 0;
32    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
33    white-space: nowrap;
34    padding: 5px 62px 8px 62px;
35}
36.elementor a {
37    -webkit-box-shadow: none;
38    box-shadow: none;
39    text-decoration: none;
40}
41
42.qodef-button.qodef-layout--outlined .qodef-m-border--bottom-left,.qodef-button.qodef-layout--outlined .qodef-m-border--top-right {
43    position: absolute;
44    top: 0;
45    left: 0;
46    width: 100%;
47    height: 100%;
48    color: #836f54;
49    z-index: 1;
50}
51
52.qodef-button.qodef-html--link {
53    position: relative;
54    display: inline-block;
55    vertical-align: middle;
56    width: auto;
57    margin: 0;
58    font-family: "Cormorant Garamond",sans-serif;
59    font-size: 19px;
60    letter-spacing: .035em;
61    line-height: 2em;
62    font-weight: 400;
63    text-decoration: none;
64    font-style: italic;
65    border-radius: 0;
66    outline: 0;
67    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
68    white-space: nowrap;
69    padding: 5px 62px 8px 62px;
70}
71
72.qodef-button.qodef-layout--outlined .qodef-m-border--top-right:before {
73    transform: scaleX(0);
74    transform-origin: right;
75}
76
77.qodef-button.qodef-layout--outlined .qodef-m-border--top-right:before {
78    content: '';
79    position: absolute;
80    top: 3px;
81    right: -6px;
82    display: block;
83    width: calc(100% + 12px);
84    height: 1px;
85    background-color: currentColor;
86    transition: transform .72s cubic-bezier(.71,.01,.51,.99);
87    will-change: transform;
88}
89.qodef-button.qodef-layout--outlined .qodef-m-border--top-right:after {
90    width: 1px;
91    height: calc(100% - 6px);
92    transform: scaleY(0);
93    transform-origin: top;
94}
95
96.qodef-button.qodef-layout--outlined .qodef-m-border--top-right:after {
97    content: '';
98    position: absolute;
99    top: 3px;
100    right: -6px;
101    display: block;
102    width: calc(100% + 12px);
103    height: 1px;
104    background-color: currentColor;
105    transition: transform .72s cubic-bezier(.71,.01,.51,.99);
106    will-change: transform;
107}
108
109.qodef-button.qodef-layout--outlined .qodef-m-border--bottom-left:before {
110    transform-origin: left;
111}
112
113.qodef-button.qodef-layout--outlined .qodef-m-border--bottom-left:after, .qodef-button.qodef-layout--outlined .qodef-m-border--bottom-left:before {
114    top: auto;
115    right: auto;
116    bottom: 3px;
117    left: -6px;
118}
119.qodef-button.qodef-layout--outlined .qodef-m-border--bottom-left:after {
120    transform-origin: bottom;
121}
122.qodef-section-title .qodef-button .qodef-m-text {
123    white-space: nowrap;
124}
125.qodef-button.qodef-layout--outlined:after {
126    display: inline-block;
127    content: "";
128    position: absolute;
129    border: 1px solid #41392e;
130    width: calc(100% + 2 * 6px);
131    height: calc(100% - 2 * 3px);
132    top: calc(3px - 0px);
133    left: -6px;
134    transform: translateX(0) translateY(0);
135    z-index: 0;
136}
137

行動規範の内容に同意します

回答1件

自分でもこの仕組みが初見だったので、勉強がてら再現してみました。
ご参考用のほうを、仮のhtmlに組み立てて動かしてみていただくと、動きがわかりやすいと思います
scaleY(0.1)&scaleX(0.1)の(0.1)を(0)にすれば、マウス載せるまで線は伸びません。
background-color: red;　のように、直接色指定してるところを消せば、
background-color: currentColor; の指定が効くので、まとめて色指定できます
（仮で色つけました、色わけついたままのほうが動きがわかりやすそうなのでそのままにしました）

質問のcssにぜったい必要なもの

hover部分の記述

css
1.qodef-button.qodef-layout--outlined:hover .qodef-m-border--bottom-left:before,
2.qodef-button.qodef-layout--outlined:hover .qodef-m-border--top-right:before{transform:scaleX(1)}
3.qodef-button.qodef-layout--outlined:hover .qodef-m-border--bottom-left:after,
4.qodef-button.qodef-layout--outlined:hover .qodef-m-border--top-right:after{transform:scaleY(1)}

ご参考：私が自分ように組み立ててみたもの(html)

html
1<div class="sample_box">
2
3	<div class="btn-hover ">
4		<a class="btn-hover-parent" href="temp.html" target="_blank">
5			<span class="btn-hover-child btn-border-top-right"></span>
6			<span class="btn-hover-child btn-border-bottom-left"></span>
7			<span class="btn-text">ぼたん</span>
8		</a>
9	</div>
10
11</div>

ご参考：私が自分ように組み立ててみたもの(css)

css
1
2body{ background: #000;}
3
4/*サンプル用*/
5.sample_box{ 
6	margin: 100px; padding: 50px; max-width: 350px; min-height: 90px;
7	border: 1px solid #666;
8	background-image: linear-gradient(45deg, #332222 25%, transparent 25%), linear-gradient(-45deg, #332222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #332222 75%), linear-gradient(-45deg, transparent 75%, #332222 75%);
9	background-size: 10px 10px;
10	background-position: 0px 0px, 0px 5px, 5px -5px, -5px 0px;
11}
12
13/** ▼btn-hover ******************************************/
14
15/*hoverされたときだけ、beforeとafterが元の大きさにのんびりもどるから、色がついたように見える仕組み*/
16
17/*A:ボタン*/
18.btn-hover-parent{
19	/*A自身の見た目*/
20	padding: 50px;
21	line-height: 50px;
22	color: #fff;
23	font-size: 50px;
24	background-color: rgba( 124,0,0,0.5);
25	border: 1px solid #fff;
26	/*span以下用準備*/
27	position: relative;
28	overflow: visible;
29	will-change: transform;
30}
31/*A:ボタン内疑似要素:アニメ線の下敷き*/
32.btn-hover-parent:after{
33	/*疑似要素*/
34	content: "";
35	/*位置*/
36	position: absolute;
37	left: -60px;
38	top: 30px;
39	z-index: 0;
40	/*展示方法*/
41	display: inline-block;
42	/*大きさ*/
43	width: calc( 100% + 120px );
44	height: calc( 100% - 60px );
45	/*装飾*/
46	border: 1px solid #ffff88;
47	/*表示位置 横軸0px 縦軸0px*/
48	transform: translateX(0px) translateY(0px);
49}
50
51
52/*SPAN:共通設定*/
53.btn-hover-parent .btn-hover-child{
54		/*位置*/
55	position: absolute; top: 0; left: 0; z-index: 1;
56		/*大きさ*/
57	width: 100%; height: 100%;
58		/*文字色*/
59	color: #00ffff;
60}
61
62/*SPAN内:疑似要素:共通設定*/
63.btn-hover-parent .btn-hover-child.btn-border-top-right:before,
64.btn-hover-parent .btn-hover-child.btn-border-top-right:after,
65.btn-hover-parent .btn-hover-child.btn-border-bottom-left:before,
66.btn-hover-parent .btn-hover-child.btn-border-bottom-left:after{
67	/*疑似要素*/
68	content: '';
69	/*位置*/
70	position: absolute; 
71	/*大きさ*/
72	display: block;  height: 10px;
73	/*背景にテキストと同じ色を指定するよ=仮色の水色になるよ*/
74	background-color: currentColor;
75	/*アニメ速度調整 ベジェ曲線で指定するよ*/
76	transition: transform 2.0s cubic-bezier( 0.71, 0.01, 0.51, 0.99);
77	/*ブラウザ向け通知：次はこんなこと(変形)をするよ*/
78	will-change: transform;
79}
80
81/*右上側：ヨコ線*/
82.btn-hover-parent .btn-hover-child.btn-border-top-right:before{	background-color: red;
83	top: 30px; right: -60px;
84	width: calc( 100% + 120px ); height: 10px;
85	transform: scaleX(0.1); /*変形は横軸だよ、(0)だと最初は見えないよ*/
86	transform-origin: right; /*transformの原点は右だよ*/
87}
88/*左下側：ヨコ線*/
89.btn-hover-parent .btn-hover-child.btn-border-bottom-left:before{ background-color: #ff0;
90	bottom: 30px; left: -60px;
91	width: calc( 100% + 120px ); height: 10px;
92	transform: scaleX(0.1);
93	transform-origin: left;
94}
95
96/*右上側：タテ線*/
97.btn-hover-parent .btn-hover-child.btn-border-top-right:after{ background-color: #f0f;
98	top: 30px; right: -60px;
99	width: 10px; height: calc(100% - 60px);
100	transform: scaleY(0.1);
101	transform-origin: top;
102}
103
104/*左下側：タテ線*/
105.btn-hover-parent .btn-hover-child.btn-border-bottom-left:after{ background-color: #0f0;
106	bottom: 30px; left: -60px;
107	width: 10px; height: calc(100% - 60px);
108	transform: scaleY(0.1);
109	transform-origin: bottom;
110}
111
112	/*ホバーしてるときヨコ線変形(Y)*/
113.btn-hover-parent:hover .btn-hover-child.btn-border-bottom-left:after,
114.btn-hover-parent:hover .btn-border-top-right:after{ transform:scaleY(1);}
115	/*ホバーしてるときタテ線変形(X)*/
116.btn-hover-parent:hover .btn-hover-child.btn-border-bottom-left:before,
117.btn-hover-parent:hover .btn-border-top-right:before{ transform:scaleX(1);}
118