首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

[分享]css3按钮闪亮特效

发布于 2024-11-11 15:48:51
0
17

CSS3按钮闪亮特效让按钮看起来更有活力,增强用户的点击欲望。下面是一些示例代码:

.btn {
    background-color: #40E0D0;
    color: #fff;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 0;
    top: -50%;
    left: -50%;
    transform: scale(0);
    transition: all 0.6s ease-out;
}

.btn:hover:after {
    opacity: 1;
    transform: scale(2);
}

这段代码会在按钮被鼠标悬停时在按钮的中心显示一个半透明的圆形遮罩层,并在动画结束时还原,从而形成闪亮特效。通过调整颜色和样式,您可以轻松地将这种按钮特效应用于您的网站。

评论
一个月内的热帖推荐
91云脑
Lv.1普通用户

62849

帖子

14

小组

291

积分

赞助商广告
站长交流