[分享]css3按钮特效源码

CSS3为网页设计师们提供了丰富的按钮特效，可以让按钮变得更加生动、鲜活，从而吸引用户的注意力。这些特效的实现离不开CSS3的强大功能，下面我们就来看一些常见的CSS3按钮特效。/ 按钮背景渐变 / ...

CSS3为网页设计师们提供了丰富的按钮特效，可以让按钮变得更加生动、鲜活，从而吸引用户的注意力。这些特效的实现离不开CSS3的强大功能，下面我们就来看一些常见的CSS3按钮特效。

/* 按钮背景渐变 */
.btn {
    background: linear-gradient(#E75480, #FF7533);
    border: none;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

/* 按钮边框动画 */
.border-btn {
    border: 2px solid #E75480;
    padding: 10px 20px;
    border-radius: 5px;
    color: #E75480;
    position: relative;
    cursor: pointer;
}

.border-btn:before {
    content: ';
    background-color: #E75480;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 5px;
    transform: scale(1.1);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.border-btn:hover:before {
    transform: scale(1.05);
    opacity: 0.7;
}

/* 按钮阴影特效 */
.shadow-btn {
    background-color: #E75480;
    box-shadow: 0px 4px 0px 0px #FF7533;
    border: none;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;  
}

.shadow-btn:hover {
    box-shadow: 0px 6px 0px 0px #FF7533;
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
} 

当然，这些只是CSS3按钮特效的冰山一角，还有更多更炫的特效需要我们去探索。希望大家可以善用这些属性，为自己的网站添加更多的生机和活力。