css实现一个按钮HTML部分CSS部分

实现一个鼠标划过左边填充成左边的颜色，划过右边填充成右边的颜色的按钮

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮</title>
  <link rel="stylesheet" href="./style/main.css">
</head>

<body>
  <a href="javascript:;">
    <span>Button</span>
    <span>Button</span>
  </a>
</body>

</html>

CSS部分

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2c3e50;
}

a{
  position: relative;
  display: inline-block;
  width: 160px;
  height: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, .15);
}

a span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  font-size: 25px;
  text-transform: uppercase;
  color: #ffffff;
}


a span:nth-child(2){
  color: #34495e;
  background: #fff;
  overflow: hidden;
  z-index: 2;
  transition: all .5s;
  clip-path: polygon(76% 0, 100% 0%, 100% 100%, 71% 100%, 48% 50%);
}

a span:nth-child(1):hover ~ span:nth-child(2){
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%, 100% 50%);
}
a span:nth-child(2):hover{
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 50%);
}