光るボタンを作りたい

光るボタンを作りたいのですが、光るアニメーション中に透明な枠線も一緒に表示されてしまいます。
この枠線を消してボタンの中だけ光らせたいです。

■調べたこと
デベロッパーツールで確認したときは、問題なかったが、実機のアイフォンで確認するとこの問題が出ました。

html
1<button>ボタン</button>

css
1
2button{
3width: 300px;
4background:red;
5    font-weight: 700;
6    font-size: 21px;
7    text-decoration: none;
8    padding: 15px 20px;
9    color: #fff;
10    border-radius: 50px;
11    border: 1px solid #fff;
12    outline: none;
13    cursor: pointer;
14    line-height: 1;
15    position: relative;
16    overflow: hidden;
17    display: -webkit-box;
18    display: -moz-box;
19    display: -webkit-flex;
20    display: -ms-flexbox;
21    display: flex;
22    justify-content: center;
23    align-items: flex-end;
24-moz-appearance: none;
25    -webkit-appearance: none;
26    appearance: none;
27}
28
29
30button:before {
31    content: "";
32    width: 30px;
33    height: 100%;
34    background-color: #fff;
35    animation: shine 3s ease-in-out infinite;
36    position: absolute;
37    top: -180px;
38    left: 0;
39    transform: rotate(
4045deg
41);
42    display: inline-block;
43}
44
45@keyframes shine {
46    0% {
47      transform: scale(0) rotate(45deg);
48      opacity: 0;
49    }
50
51    80% {
52      transform: scale(0) rotate(45deg);
53      opacity: 0.5;
54    }
55
56    81% {
57      transform: scale(4) rotate(45deg);
58      opacity: 1;
59    }
60
61    100% {
62      transform: scale(50) rotate(45deg);
63      opacity: 0;
64    }
65  }
66