ボタンにカーソルを当てても指マークに変わらない

前提

videoが再生されているときはbuttonに’停止’の文字が表示され、
videoが再生されていないときはbuttonに'再生'が表示されるボタンを作っています。

実現したいこと・発生している問題・試したこと

上記の過程で、buttonにcursor:pointer;を指定してもポインタは指マーク(?)に変わらず反応しないという問題を解決したいです。!importantを加えたり、buttonタグをlabelやdiv、aなどに変えたり、兄弟要素にinputタグを入れてforで繋げたりと試しましたが、どれも反応は変わりませんでした。

該当のソースコード

HTML・javascript
1<head>
2	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
3	<script>
4		function videoBtn(){
5			video.play();
6			button.html("停止");
7		}
8
9		function videoBtn(){
10			video.pause();
11			button.html("再生");
12		}
13	</script>
14</head>
15<body>
16        <div class="ly-video">
17	     　　<button class="video_btn" onclick="videoBtn()"></button>
18	     　　<video id="video" src="..." autoplay loop muted></video>
19        </div>
20</body>

CSS
1.ly-video{
2　　position:relative;
3　　z-index:-1;
4　　width:100%;
5　　height:100%
6}
7
8.video_btn{
9	border:solid 2px #484848;
10	padding:7px 15px;
11	border-radius:5px;
12	position:absolute;
13	bottom:50px;
14	right:40px;
15	z-index:10;
16}
17
18.video_btn:hover{
19    cursor:pointer;
20}