[分享]css3按钮点击效果从中间展开

CSS3中的按钮点击效果是网页设计中的一个常见问题。其中一种独特的效果是从中间展开的按钮，为网站带来新的视觉效果。下面我们来看看如何用CSS3来实现这一效果。 .button { : relative...

CSS3中的按钮点击效果是网页设计中的一个常见问题。其中一种独特的效果是从中间展开的按钮，为网站带来新的视觉效果。下面我们来看看如何用CSS3来实现这一效果。

 .button {
    position: relative;
    display: inline-block;
    padding: 8px 22px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    background: #2c3e50;
    border-radius: 25px;
    overflow: hidden;
    z-index: 1;
  }
  
  .button span {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #1779ba;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .button:hover span {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.45, 2, 0.35, 1);
  } 

首先，在按钮的CSS中设置相对定位，以便后面用绝对定位定位伪元素。按钮还要具有圆形边缘，并将背景设置为蓝色。

使用伪元素span来实现展开的蓝色背景。伪元素应该绝对定位，占满整个按钮。使用transform: scaleX(0);来将它们缩小到没有，将其左边缘设置为transform-origin: left;，从而使它们在按钮左侧开始展开。使用transition属性实现平滑的过渡效果。

最后，在:hover伪类下，将span元素展开到100%的宽度。为了实现更流畅的动画效果，可以使用cubic-bezier()来控制动画速度。

这就是从中间展开的按钮效果的CSS样式代码。使用这种效果可以使网站更加引人注目，使用户更容易在重要按钮上点击，从而增加交互性。