[分享]css3按钮背景延伸

CSS3 按钮背景延伸可以是按钮看起来更吸引人。通常情况下，按钮的背景只会在点击时出现，但是使用 CSS3 可以实现背景延伸效果。以下是实现背景延伸的 CSS3 代码：button { backgro...

CSS3 按钮背景延伸可以是按钮看起来更吸引人。通常情况下，按钮的背景只会在点击时出现，但是使用 CSS3 可以实现背景延伸效果。以下是实现背景延伸的 CSS3 代码：

button {
    background-color: #1E90FF;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    padding: 10px 40px;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease-in-out;
    z-index: -1;
}

button:hover:before {
    width: 100%;
    left: 0;
} 

上述代码的作用是将按钮的背景颜色设置为蓝色，并通过线性渐变效果添加了背景延伸的效果。按钮的 padding 和边框属性都被设置为 0，以达到更好的视觉效果。使用 position 属性将按钮的 overflow 属性设置为 hidden，使得按钮的子元素不可见。

伪元素 before 也被添加到了按钮上，它的作用是用来进行背景延伸效果的实现。在 before 元素中设置了背景颜色，并且将它的宽度设置为 0。在按钮上进行鼠标悬浮时，使用 CSS3 过渡效果将 before 元素的宽度设置为 100%，左侧位置为 0，这样就实现了背景延伸的效果。

总结来说，通过使用 CSS3 可以让按钮看起来更吸引人。通过添加一些简单的 CSS 属性和 CSS3 过渡效果，可以实现背景延伸的效果，这样你的按钮就会从一个普通的按钮升级成一个更引人注目的按钮。