利用伪元素和overflow:hidden实现填充按钮

置顶 于 2022-05-20 01:48:25 发布
阅读量263 收藏
点赞数
分类专栏： css3 hover 文章标签： css css3 html
优快云-WanFengZhou-2021-LastDay
本文链接：https://blog.youkuaiyun.com/qq_39024950/article/details/124875570
版权
这篇博客介绍了如何使用CSS伪元素和`overflow:hidden`来创建具有填充效果的按钮，并结合过渡动画实现动态效果。同时，文章展示了如何通过CSS实现一个具有淡入淡出、缩放动画的模态框，包括确认删除的交互场景，以及各种动画细节的设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用伪元素和overflow:hidden实现填充按钮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* @import url(https://fonts.googleapis.com/css?family=Lato); */
        :root {
            --primary-color: hsl(171, 100%, 41%);
            --success-color: hsl(141, 53%, 53%);
            --danger-color: hsl(348, 86%, 61%);
        }
        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            font-family: Lato, sans-serif;
            background: #ECEFFC;
        }
        .btn {
            position: relative;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #212121;
            text-decoration: none;
            background-color: white;
            border: transparent;
            border-radius: 3px;
            outline: transparent;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            white-space: nowrap;
            transition: 0.25s;
        }
        .btn-danger {
            color: white;
            background-color: var(--danger-color);
        }
        .btn-danger:hover {
            background-color: #ee2049;
        }
        .btn-round {
            border-radius: 30px;
        }
        .btn-fill {
            overflow: hidden;
        }
        .btn-fill-left::before {
            transform: translateX(100%);
        }
        .btn-fill-right::before {
            transform: translateX(-100%);
        }
        .btn-fill::before {
            position: absolute;
            content: "";
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            transition: 0.4s cubic-bezier(0.75, 0, 0.25, 1);
        }
        .btn-fill::after {
            position: relative;
            content: attr(data-text);
            transition: 0.4s ease;
        }
        .btn-fill:hover::before {
            transform: translateX(0);
        }
        .btn-fill:hover::after {
            color: white !important;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            color: white;
            background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
            border: transparent;
            border-radius: 12px;
            box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
            -webkit-animation: show-modal 0.5s ease forwards;
            animation: show-modal 0.5s ease forwards;
        }
        .modal::-webkit-backdrop {
            background: rgba(0, 0, 0, 0.4);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }
        .modal::backdrop {
            background: rgba(0, 0, 0, 0.4);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }
        .modal .model-icon {
            margin-bottom: 1.25rem;
            opacity: 0;
            -webkit-animation: show-modal-icon 0.5s ease 0.2s forwards;
            animation: show-modal-icon 0.5s ease 0.2s forwards;
        }
        .modal .modal-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 300px;
            padding: 1em;
        }
        .modal .modal-content .modal-title {
            margin-top: 0;
            margin-bottom: 1.2rem;
            opacity: 0;
            -webkit-animation: show-modal-text 0.5s ease 0.35s forwards;
            animation: show-modal-text 0.5s ease 0.35s forwards;
        }
        .modal .modal-content .modal-description {
            margin: 0;
            opacity: 0;
            -webkit-animation: show-modal-text 1s ease 0.5s forwards;
            animation: show-modal-text 1s ease 0.5s forwards;
        }
        .modal .modal-content .modal-options {
            margin-top: 1rem;
            display: flex;
            justify-content: space-around;
        }
        .modal .modal-content .modal-options .option {
            padding: 0 2em;
            margin: 0.3em;
            font-size: 20px;
            font-weight: 700;
            line-height: 2;
        }
        .modal .modal-content .modal-options .confirm {
            opacity: 0;
            -webkit-animation: show-modal-option 0.5s ease 0.65s forwards;
            animation: show-modal-option 0.5s ease 0.65s forwards;
        }
        .modal .modal-content .modal-options .confirm::before {
            background: var(--success-color);
        }

        .modal .modal-content .modal-options .confirm::after {
            color: var(--success-color);
        }
        .modal .modal-content .modal-options .cancel {
            opacity: 0;
            -webkit-animation: show-modal-option 0.5s ease 0.8s forwards;
            animation: show-modal-option 0.5s ease 0.8s forwards;
        }
        .modal .modal-content .modal-options .cancel::before {
            background: var(--danger-color);
        }

        .modal .modal-content .modal-options .cancel::after {
            color: var(--danger-color);
        }
        @-webkit-keyframes show-modal {
            from {
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.1);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes show-modal {
            from {
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.1);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @-webkit-keyframes show-modal-icon {
            from {
                transform: scale(0.4);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @keyframes show-modal-icon {
            from {
                transform: scale(0.4);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }
        @-webkit-keyframes show-modal-text {
            from {
                transform: scale(0.6);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes show-modal-text {
            from {
                transform: scale(0.6);
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @-webkit-keyframes show-modal-option {
            from {
                transform: scale(0.4);
            }

            50% {
                transform: scale(1.2);
                opacity: 1;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes show-modal-option {
            from {
                transform: scale(0.4);
            }

            50% {
                transform: scale(1.2);
                opacity: 1;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <dialog id="confirm-modal" class="modal">
        <div class="modal-content">
            <svg t="1574164208713" class="model-icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5819" width="63" height="63">
                <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM512 877.714286c-40.228571 0-73.142857-32.914286-73.142857-73.142857s32.914286-73.142857 73.142857-73.142857 73.142857 32.914286 73.142857 73.142857S552.228571 877.714286 512 877.714286zM585.142857 512c0 40.228571-32.914286 73.142857-73.142857 73.142857s-73.142857-32.914286-73.142857-73.142857L438.857143 219.428571c0-40.228571 32.914286-73.142857 73.142857-73.142857s73.142857 32.914286 73.142857 73.142857L585.142857 512z"
                    p-id="5820" fill="white"></path>
            </svg>
            <h2 class="modal-title">确认要删除吗?</h2>
            <p class="modal-description">
                删除过后无法撤消此操作。
            </p>
            <div class="modal-options">
                <button class="btn btn-round btn-fill btn-fill-left option confirm" data-text="确认"
                    onclick="document.querySelector('#confirm-modal').close()"></button>
                <button class="btn btn-round btn-fill btn-fill-right option cancel" data-text="取消"
                    onclick="document.querySelector('#confirm-modal').close()"></button>
            </div>
        </div>
    </dialog>
    <form action="javascript:void(0);">
        <button class="btn btn-danger" onclick="document.querySelector('#confirm-modal').showModal()">
            删除历史
        </button>
    </form>
</body>

</html>
CSS技巧专栏：一日一例 14-纯CSS实现模拟水波波动填充按钮特效
uu0216的博客
07-29 431
我们先做复杂的水波滚动效果，先修改一下HTML，给按钮增加一个 行内元素 span，它会有1个本体和两个伪元素层，用来实现上面我们说过的水波波动效果。
CSS技巧专栏：一日一例 8 - 纯CSS利用mask属性实现按钮边框对称包围特效
最新发布
uu0216的博客
07-18 817
在前一篇文章的最后，给各位看官留了一个作业，如上图所示。本篇文章，我们来公布一下它的源码。
css伪元素实现按钮边框动效
qq_34200636的博客
04-27 369
wx公众号：XQ前端 1. 效果预览 2. 源码 我们通过伪元素和渐变实现以上效果 // 边框动画 @mixin border-animate() { position: relative; border-color: #24AFFF; color: #24AFFF; opacity: 0.8; background: #3c3d45; &:before, &:after { content: ''; display: block; width: 0; height: 0;
overflow属性对before、after伪元素的影响
Nicole Cao的博客
07-16 4483
div中有before伪元素，如图：当该div内容增多时，添加了纵向滚动条的样式，如下：max-height:300px; overflow: auto;随后伪元素就消失了，如图，小箭头不见了。overflow的说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflowbefore的说明：https://developer.mozill...
CSS伪元素实现的3D按钮
w1366352655的博客
12-03 155
CSS伪元素实现的3D按钮 在线演示 本地下载 posted @ 2018-12-03 18:31 栖息地 阅读(...) 评论(...) 编辑 收藏
CSS伪元素 利用伪元素为input输入框添加图标 伪元素before的垂直居中
一起来看烟花吧的博客
01-29 8580
目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考 伪类和伪元素 伪类专门用来表示元素的一种特殊的状态。比如：访问过的链接，普通的链接，获取焦点文本框 伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分 CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 在CSS3中，通过::创建伪元素，通过:选中伪类。浏览器也接收将::before写做:before 封
html5扩展库,Bootstrap4按钮样式扩展库
weixin_29234509的博客
06-24 359
这是一款简单的Bootstrap按钮样式扩展库。该Bootstrap按钮样式扩展库通过定义CSS，来为bootstrap 4原生按钮添加3D按钮，带图标的按钮，圆角按钮，以及为按钮添加更多的可用颜色，非常实用。使用方法在页面中引入bootstrap 4 样式文件，以及botton.css文件。HTML结构实用时，只需要在原生的bootstrap 4按钮标签上添加需要的class类即可，例如3D按钮...
使用text-align:justify实现两端对齐一例
10-30
此外，针对中文和英文的不同处理方式，我们可能还需要采用特定的技巧，比如通过伪元素来插入额外的内容，以确保在所有主流浏览器中都能实现一致的视觉效果。通过综合运用这些技术手段，我们可以打造出既美观又具有较...
CSS伪类与伪元素详解：提升样式表现力的秘诀，让你的网站更加生动
![CSS伪类与伪元素详解：提升样式表现力的秘诀，让你的网站更加生动]...在进阶应用部分，文章着重讲解了伪类与伪元素如何实现复杂的交互效果、创造性布局排版，并讨论了性能优化与兼容性问题
CSS实现图片背景填充的六边形的示例代码
09-24
这个方法主要是利用CSS的伪元素和变换（transform）属性来构造形状。以下是一个详细步骤，解释如何通过CSS将一个六边形的背景填充为图片。 首先，我们创建一个包含三个矩形的HTML结构： ```html ...
动态闪烁按钮ShineButton的用法
王项雨 的博客
10-11 3374
1.首先要依赖这个包： compile 'com.sackcentury:shinebutton:0.1.6' 2.在xml布局里面加载 view 是这样的：                   android:layout_width="50dp"                 android:layout_height="50dp"                 a
可能被忽略的"按钮组件"细节
weixin_34236497的博客
01-30 551
对于组件的开发，我们首推的是在开始写代码之前一定要和设计师沟通。看看设计师对于我们组件的拓展是怎么思考的。以规避程序员和设计师拓展方式的不一致导致的设计师一小改程序员一大改的成本问题。 通常我们需要做一个按钮的时候，无非就从之前或者别人那里把代码拷贝过来，然后根据设计稿，改改颜色，字号什么之类的就可以了。 但随着项目扩张按钮形态的增加，如果我们一开始就不是全局的角度去设计组件，到后面就需要花更多...
一个button 效果
czy279470138的博客
12-06 332
https://pan.baidu.com/s/1cZosAQgaGC_0RJH_BE0qyg#list/path=%2Fsharelink1682068415-67522119946802%2F%E5%8F%AF%E4%B8%8A%E4%BC%A0%E5%8A%A8%E7%94%BB%2F%E4%BA%91%E6%9C%B5&parentPath=%2Fsharelink16820684...
html元素样式的overflow属性对其before、after伪元素的影响
Twinkle的博客
07-07 1415
/* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */ overflow: scroll;::before,::after 会为当前元素创建一个子元素作为伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。因为scroll使得ul的内容被裁剪了，于是作为子元素的befor...
伪元素应用制作Button
江湖再见
04-08 1552
效果 HTML 目的 再次领会了CSS3的强大，充分利用:before和:after两个方法，同时中间还涉及到了线性渐变。 DEMO1 DEMO2DEMO3-1DEMO3-2DEMO3-3DEMO4DEMO5 CSS body { padding:0; margin:0 auto; width:700px; font:1em/1.4 Cambri
css伪元素实现关闭和选项按钮
栈木地
02-19 1881
原理很简单； 关闭按钮：通过盒子的伪元素（::before和::after）实现关闭那俩叉； 选项按钮：同上，不同的是要借用一个i标签； 直接写好demo拉走，很短，包含两个按钮样式 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;ti
CSS 深入理解：overflow: hidden——隐藏溢出、清除浮动、解除坍塌
热门推荐
树上骑个猴的博客
02-17 1万+
overflow:hidden 的主要功能有三个： 隐藏溢出 清除浮动 解除坍塌 举例理解 初始html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co
css中为伪元素增加点击事件和hover
qq_51218646的博客
01-15 5018
鼠标悬停在父元素上面时为伪类元素增加样式 <!-- html结构 --> <div class="father"></div> <style> .father::after { content: 'after'; } .father:hover::after { color: pink; } </style> 伪元
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2677
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
CSS3动画技巧：炫彩旋转按钮效果实现指南
紧接着，我们可以使用CSS3的伪元素和关键帧动画来为这个按钮添加炫彩的旋转效果。以下是实现该动画的CSS代码： ```css #animatedButton { position: relative; padding: 10px 20px; color: white; background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦一场江南烟雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值