hoverすると浮き上がるようなボタンを作ったが、ブラウザによってズレが生じてしまうので、そのズレを解消したい。

こんにちは、
今inputタグにhoverして浮き上がるようなボタンを作ったりました。
→　

ですが、クローム以外のブラウザでみるとズレが生じてしまいます。

どうすれば、ズレが生じなくなるのかアドバイス頂けるとうれしいです。

html
1<div id="contact" class="contact">
2    <div class=" content">
3        <h2>CONTACT</h2>
4        <div class="container">
5            <form class="form">
6                <ul>
7                    <li>
8                        <label for="form-name">お名前</label>
9                        <input type="text" required="required" id="form-name">
10                    </li>
11                    <li>
12                        <label for="form-mail">メールアドレス</label>
13                        <input type="text" id="form-mail">
14                    </li>
15                        
16                    <li>
17                        <label for="form-text">お問い合わせ内容</label>
18                        <textarea id="form-text"></textarea>
19                    </li>
20                    <li class="submit">
21                        <input type="submit" class="sub-bt"><span></span>
22                    </li>
23                </ul>     
24            </form>
25        </div>
26    </div>
27</div>

CSS
1main {
2    width: 100%;
3}
4section{
5    width: 100%;
6    text-align: center;
7    margin-top: 70px;
8}
9section .container {
10    margin-bottom: 80px;
11}
12.content {
13    max-width: 1200px;
14    margin: auto;
15}
16h2 {
17    font-size: 30px;
18    letter-spacing: 3px;
19    color: #3a424a;
20    margin-bottom: 50px;
21}
22h2::before, h2::after {
23    content: "・";
24}
25
26ul {
27    list-style: none;
28}
29
30.contact .container {
31    display: block;
32    position: relative;
33}
34#contact p {
35    margin-bottom: 30px;
36}
37
38
39.form {
40    width: 68%;
41    margin: auto;
42}
43.form ul {
44    width: 80%;
45    text-align: left;
46    margin: auto;
47    position: relative;
48}
49.form li {
50    position: relative;
51}
52.form li + li {
53    margin-top: 40px;
54}
55.form li:last-child{
56   text-align: center;
57}
58.form label{
59    font-size: 14px;
60    display: block;
61}
62.form-item {
63    width: 100%;
64    border: none;
65    border-bottom: 2px solid #cca8a8;
66    background: #ffffff00
67}
68.form-item:focus {
69    background: white;
70}
71.form-per {
72    height: 30px;
73    outline: none;
74}
75.form-subs {
76    height: 80px;
77    outline: none;
78}
79.submit {
80    width: fit-content;
81    margin: 30px auto 0;
82}
83.submit::after{
84    content: "";
85    width: 141.5px;
86    height: 45px;
87    border-radius: 12px;
88    border: 2px solid #9a5a5a;
89    display: block;
90    position: absolute;
91    top: 9%;
92    left: 4%;
93    z-index: 2;
94    transition: 0.3s ease;
95}
96.submit:hover::after{
97    /* content: "Submit"; */
98    color: #ffffe7;
99    line-height: 43px;
100    background: #9a5a5a;
101    top: 0;
102    left: 0;
103    z-index: 1;    
104}
105.sub-bt {
106    color: #ffffe7;
107    background: #cca8a891;
108    border: none;
109    border-radius: 12px;
110    padding: 15px 50px;
111    position: relative;
112    z-index: 2;
113    cursor: pointer
114}
115
116.bg-col {
117    width: 60%;
118    height: 480px;
119    background-color: #fbfbfb;;
120    position: absolute;
121    top: -6%;
122    left: 20%;
123    z-index: -1;
124    border-radius: 30px;
125}
126.bg-tex {
127    width: 100%;
128    height: 100%;
129    background-image: url(image/paper10.png);
130    background-size: auto;
131    background-position: 20%;
132    border-radius: 30px;
133    position: absolute;
134    top: 0;
135    left: 0;
136    z-index: -1;
137    opacity: 0.1;
138}