如何设置一个左右两边是两个半圆上下两边是平行线的按钮

要设置一个左右两边是两个半圆上下两边是平行线的按钮，你可以使用CSS来实现。具体方法如下：

1. 首先，创建一个按钮的HTML元素，例如：

<button class="circle-button"></button>

2. 然后，在CSS中为按钮添加样式，包括宽度、高度、边框、背景颜色等。同时，为按钮设置圆角的半径，例如：

.circle-button {
  width: 100px;
  height: 40px;
  border: none;
  background-color: #333;
  border-radius: 20px;
}

3. 接下来，为按钮的左右两边分别添加半圆形的样式，可以使用伪元素before和after来实现。例如：

.circle-button:before, .circle-button:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #333;
  border-radius: 20px 0 0 20px;
}

.circle-button:before {
  left: 0;
}

.circle-button:after {
  right: 0;
  border-radius: 0 20px 20px 0;
}

4. 最后，为按钮的上下两边添加平行线的样式，可以使用CSS的渐变来实现。例如：

.circle-button {
  background: linear-gradient(to bottom, #333 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 -100%;
}

.circle-button:hover {
  background-position: 0 0;
}

这样，就可以实现一个左右两边是两个半圆上下两边是平行线的按钮了。