[分享]css3按钮怎么滑

CSS3按钮是当今设计中最流行的元素之一。它们可以是圆形、方形、带边框或背景，以及加上各种动画效果。其中一种常见的动画效果是按钮滑块，在用户点击按钮时，滑块可以以流畅的方式滑动。 下面是一个使用CSS...

CSS3按钮是当今设计中最流行的元素之一。它们可以是圆形、方形、带边框或背景，以及加上各种动画效果。其中一种常见的动画效果是按钮滑块，在用户点击按钮时，滑块可以以流畅的方式滑动。
下面是一个使用CSS3实现按钮滑动的示例代码：

 .button {
    position: relative;
    overflow: hidden;
    height: 40px;
    width: 100px;
    border: none;
    background-color: #4786d4;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
  }
<br>
  .button:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #5d9cec;
    transition: left .2s ease-in-out;
  }
<br>
  .button:hover {
    background-color: #5d9cec;
  }
<br>
  .button:hover:before {
    left: 0;
  } 

在这段CSS代码中，我们首先设置按钮的基础样式，并创建一个伪元素做为滑块。CSS属性 `position` 设置为 `relative`，使得按钮和伪元素都相对于它们的父元素进行定位。
`overflow` 属性设置为 `hidden`，这意味着如果滑块要超出按钮的边界，则会被截断。
接下来，我们将伪元素的 `left` 属性设置为 `-100%`，这样它就在按钮的左侧。当鼠标悬停在按钮上时，`:hover` 伪类将触发，改变按钮的背景颜色和滑块的位置。
最后，我们使用 `transition` 属性实现滑动效果。当鼠标悬停在按钮上时，滑块会以 `.2s` 的时间以 `ease-in-out` 的方式从按钮的左侧滑到右侧。同样，当鼠标移开时，滑块也会以相同的方式滑回到左侧。
在你的HTML中，你可以使用这样的代码来创建按钮：

 <button class="button">滑动按钮</button> 

这样，你就有了一个美观、有效的CSS3按钮，它可以引导用户进行某种操作，同时还能提供一个令人愉悦的滑动动画。