[分享]css两个椭圆交叉切按钮

今天我们要来讲解如何使用CSS制作两个椭圆交叉切按钮。这种按钮通常被用于响应点击或切换选项的操作。让我们来看一下代码实现： .button { width: 50px; height: 30px; :...

今天我们要来讲解如何使用CSS制作两个椭圆交叉切按钮。这种按钮通常被用于响应点击或切换选项的操作。让我们来看一下代码实现：

 .button {
    width: 50px;
    height: 30px;
    position: relative;
    cursor: pointer;
  }
  
  .button:before {
    content: "";
    position: absolute;
    top: -10px;
    right: -5px;
    width: 30px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
  }
  
  .button:after {
    content: "";
    position: absolute;
    top: -5px;
    left: -10px;
    width: 50px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
  }
  
  .button:hover:before {
    background-color: #ccc;
  }
  
  .button:hover:after {
    background-color: #ccc;
  } 

我们使用一个按钮类名将按钮相关的样式属性，如宽度、高度等加上。我们还设置了光标指针，以方便用户点击。接下来，我们使用伪元素:before和:after，分别对按钮进行添加。通过使用位置属性，将两个椭圆交叉。我们还用了较小的尺寸和大较大的尺寸选项来创建两个椭圆。我们通过设置border-radius属性为50%来将其变为椭圆形。最后，我们在鼠标悬停的时候改变背景颜色，以此使按钮看起来更加彰显特性。

到此，我们已经成功的使用CSS制作出了两个椭圆交叉切按钮，它们看起来非常酷！