无法显示按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="轮播图.css">
</head>
<body>
<div class="main">
  
  <div class="banner">
   <a href="#">
    <div class="banner_slide slide1 slide_active "><img src="imge/bg1.jpg"></div>
   </a>
   <a href="#">
    <div class="banner_slide slide2"><img src="imge/bg2.jpg"></div>
   </a>
   <a href="#">
    <div class="banner_slide slide3"><img src="imge/bg3.jpg"></div>
   </a>
  </div>
  
  <a href="javascript:void(0)" class="button prev"></a>
  <a href="javascript:void(0)" class="button next"></a>
</div>
</body>
</html>

*{
margin:0px;
padding:0px;
}

body{
margin-top:30px;
background-color:gray;
font-family:"微软雅黑";
}

.main{
width:1200px;
    height:460px;
    overflow:hidden;
    position:relative;
}

.banner{
width:1200px;
    height:460px;
    overflow:hidden;

    position:relative;
}

.banner_slide{
width:1200px;
height:460px;
position:absolute;
}

.button{
    position:absolute;
    width:40px;
    height:80px;
    left:244px;
    top:50%;
    margin-top:-40px;
    background:url(../imge/arrow.png) center center;
}

.next{
left:auto;
right:0px;
}

cj啦啦啦啦 2019-11-04

源自：项目：JavaScript轮播图 2-3 轮播图上按钮样式