纯css按钮的实现

最新推荐文章于 2023-10-24 11:22:35 发布
最新推荐文章于 2023-10-24 11:22:35 发布
阅读量725 收藏
点赞数
分类专栏： web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37026273/article/details/100016490
版权

效果如下（带动画）：

<!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-Compatible" content="ie=edge">
    <title>科技按钮</title>
    <style>
        body{
            background: #6445ad;
        }
        #btn-group{
            margin: 100px;
            width: 13.29em;
            height: 13.59em;
            font-size: 17px;
            text-align: center;
        }
        .btn-group-inner a{
            color: rgba(255,255,255,0.8);
            display: inline-block;
            width: 100%;
            line-height: 2.25em;
            border: 2px solid rgba(255,255,255,0.33);
            margin: .44em 0 .44em -2px;
            position: relative;
            border-radius: 5px;
        }
        a{
            text-decoration: none;
            cursor: pointer;
        }
        .btn-group-inner a em{
            position: absolute;
            top: -1px;
            left: -1px;
            display: block;
            width: 13.29em;
            height: 2.25em;
            overflow: hidden;
            border: 2px solid #fff;
            opacity: 0;
            border-radius: 5px;
        }
        .btn-group-inner a:hover em.em_1{
            animation: btnm1 .5s linear;
            -webkit-animation: btnm1 .5s linear;
        }
        .btn-group-inner a:hover em.em_2{
            animation: btnm1 .5s linear;
            -webkit-animation: btnm2 .75s linear;
        }
        @keyframes btnm1{
            0%{
                transform:scale(1,1);
                -webkit-transform:scale(1,1);
                -moz-transform:scale(1,1);
                -o-transform:scale(1,1);
                -ms-transform:scale(1,1);
                -webkit-transform-origin: 40% 40%;
            }
            50%{
                opacity: 0.3;
                transform:scale(1.12,1.4);
                -moz-transform:scale(1.12,1.4);
                -webkit-transform:scale(1.12,1.4);
                -o-transform:scale(1.12,1.4);
                -ms-transform:scale(1.12,1.4);
                -webkit-transform-origin: 40% 40%; 
            }
            100%{
                opacity: 0;
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 40%;
            }
        }
        @-webkit-keyframes btnm1{
            0%{
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 40%;
            }
            50%{
                opacity: 0.3;
                -webkit-transform:scale(1.12,1.4);
                -webkit-transform-origin: 40% 40%; 
            }
            100%{
                opacity: 0;
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 40%;
            }
        }
        @keyframes btnm2{
            0%{
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 60%;
            }
            50%{
                opacity: 0.3;
                -webkit-transform:scale(1.12,1.4);
                -webkit-transform-origin: 40% 60%; 
            }
            100%{
                opacity: 0;
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 60%;
            }
        }

        @-webkit-keyframes btnm2{
            0%{
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 60%;
            }
            50%{
                opacity: 0.03;
                -webkit-transform:scale(1.12,1.4);
                -webkit-transform-origin: 40% 60%;  
            }
            100%{
                opacity: 0;
                -webkit-transform:scale(1,1);
                -webkit-transform-origin: 40% 60%;
            }
        }
        .own-btn{
            margin: 50px 100px;
        }
        .own-btn a{
            min-width: 110px;
            height: 33px;
            line-height: 33px;
            display: inline-block;
            text-align: center;
            border: 1px solid #fff;
            color: #fff;
            position: relative;
            padding: 0px 3px;
        }
        .em1{
            position: absolute;
            bottom: -7px;right: -2px;
            width: 0px;height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #eee;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); 	/* IE 9 */
            -moz-transform:rotate(45deg); 	/* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg); 	/* Opera */
            z-index: 11;
        }
        .em2{
            position: absolute;
            bottom: -7px;right: -3px;
            width: 0px;height: 0px;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            border-left: 9px solid #6445ad;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); 	/* IE 9 */
            -moz-transform:rotate(45deg); 	/* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg); 	/* Opera */
            z-index: 22;
        }
        .em3{
            position: absolute;
            bottom: -4px;right: -2px;
            width: 0px;height: 0px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #fff;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg); 	/* IE 9 */
            -moz-transform:rotate(45deg); 	/* Firefox */
            -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
            -o-transform:rotate(45deg); 	/* Opera */
            z-index: 33;
        }
        .em4{
            position: absolute;
            top: -10px;left: -3px;
            width: 0px;height: 0px;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid #fff;
            transform:rotate(225deg);
            -ms-transform:rotate(225deg); 	/* IE 9 */
            -moz-transform:rotate(225deg); 	/* Firefox */
            -webkit-transform:rotate(225deg); /* Safari 和 Chrome */
            -o-transform:rotate(225deg); 	/* Opera */
            z-index: 11;
        }
        .em5{
            position: absolute;
            top: -10px;left: -3px;
            width: 0px;height: 0px;
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
            border-left: 14px solid #6445ad;
            transform:rotate(225deg);
            -ms-transform:rotate(225deg); 	/* IE 9 */
            -moz-transform:rotate(225deg); 	/* Firefox */
            -webkit-transform:rotate(225deg); /* Safari 和 Chrome */
            -o-transform:rotate(225deg); 	/* Opera */
            z-index: 33;
        }
        .em6{
            position: absolute;
            top: -8px;left: -2px;
            width: 0px;height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #fff;
            transform:rotate(225deg);
            -ms-transform:rotate(225deg); 	/* IE 9 */
            -moz-transform:rotate(225deg); 	/* Firefox */
            -webkit-transform:rotate(225deg); /* Safari 和 Chrome */
            -o-transform:rotate(225deg); 	/* Opera */
            z-index: 33;
        }


    </style>
</head>
<body>
    <div id="btn-group">
        <div class="btn-group-inner">
            <a href="">
                <span>技术</span>
                <em class="em_1"></em>
                <em class="em_2"></em>
            </a>
            <a href="">
                <span>产品</span>
                <em class="em_1"></em>
                <em class="em_2"></em>
            </a>
            <a href="">
                <span>用户设计</span>
                <em class="em_1"></em>
                <em class="em_2"></em>
            </a>
            <a href="">
                <span>管理支持</span>
                <em class="em_1"></em>
                <em class="em_2"></em>
            </a>
        </div>
    </div>
    <hr>
    <!-- 自制按钮 -->
    <div class="own-btn">
        <a href="">
            <label>配置</label>
            <em class="em1"></em>
            <em class="em2"></em>
            <em class="em3"></em>
            <em class="em4"></em>
            <em class="em5"></em>
            <em class="em6"></em>
        </a>
    </div>
</body>
</html>

 

择一城终老...
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css按钮实现
04-07
纯css按钮
纯CSS3动画按钮
06-12
纯CSS3动画按钮是网页设计中的一个重要元素，它利用了CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），来实现丰富的交互效果，提升用户体验。下面将详细介绍这些知识点。 1. CSS3...
纯CSS buttons
小墨鱼
03-31 494
效果：DemoHTML：<h1>Pure Css Button</h1> <div class="main"> <div class="sub-main"> <button class="button-one">Tap Me</button> </div> <div class="sub-main">
纯css的button按钮
Rick的修仙路
07-31 937
css代码如下： .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: ...
分享几个精美的网页按钮样式，纯CSS实现，无JS（拿来即用）
最新发布
Z_B_L的博客
10-24 389
点击按钮： 效果：凹陷效果： 效果：开关按钮： 效果：谢谢大家观看，T________T
纯CSS实现beautiful按钮
wang_yu_shun的博客
08-22 258
大家好，我是前端点线面，一位新生代农民工，欢迎关注我获取最新前端知识和 《前端百题斩》pdf版(内容包括JS基础篇、浏览器篇、网络篇，共计50个章节，5万多字)近期工作中遇到一个需求——实...
纯CSS3实现简易3D按钮特效代码
03-20
总结，通过CSS3的特性，我们可以轻松实现一个具有3D效果的按钮，无需JavaScript或其他复杂的前端框架。只需理解并巧妙运用`transform`、`transition`和`keyframes`，就能创建出富有动态感和交互性的网页元素。对于...
纯css实现按钮开关效果
05-15
至此，一个简单的纯CSS按钮开关效果就完成了。你可以根据实际需求调整样式，例如添加自定义图标、更改颜色主题或者增加过渡动画等。这个方法不仅适用于开关按钮，还可以扩展到其他类似交互组件，如切换选项卡、显示...
纯CSS3实现发光动画按钮特效
04-16
解压密码：RJ4587 这是一款基于纯CSS3的发光按钮，按钮发光的...之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。
【博学谷学习记录】超强总结，用心分享|纯css-炫酷的按钮
qq_36145110的博客
09-04 1529
纯css 炫酷的按钮
纯CSS3动画按钮效果 5种漂亮样式
02-22
纯CSS3动画按钮效果 5种漂亮样式，在www.html5tricks.com这边看到的，分享
5款纯css3按钮样式
12-13
这是一款使用css伪元素制作的纯css3按钮样式。该款按钮样式共有5种效果，后面4种有3d立体效果。该css3按钮样式是网页设计不可多得的素材。
20种炫酷CSS3按钮样式和鼠标滑过特效
09-04
20种炫酷CSS3按钮样式和鼠标滑过特效
12个超赞的CSS按钮，绝对的震撼
12-02
12个超赞的CSS按钮，绝对的震撼，送给那些追求完美和品质的朋友们。 准备好了吗^
纯CSS3动画按钮效果
w1366352655的博客
12-03 930
纯CSS3动画按钮效果 在线演示 本地下载 posted @ 2018-12-03 20:24 栖息地 阅读(...) 评论(...) 编辑 收藏
纯CSS实现按钮特效
ill233的博客
03-18 471
纯CSS实现一些按钮特效 <button class="btn1">Hello World</button> 利用伪类标签hover和after给按钮添加一些悬浮效果 .btn1 { background-color: white; border: 1px solid rgb(255, 99, 99); ...
怎么给按钮添加CSS样式
xiaoweids的博客
09-17 1047
linkrel="stylesheet"type="text/css"href="这里是css文件的路径">.btn{需要添加的样式}
几个实用又好看的纯css 按钮样式
热门推荐
qq_43682422的博客
08-04 2万+
几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;
【CSS按钮特效】css如何实现科技感好看按钮效果（尾附源码下载）
赏樱看雪撸代码
06-09 3050
CSS3实现高级按钮，CSS实现按钮动画特效，CSS实现动态按钮效果，CSS实现按钮光影效果，box-reflect实现倒影效果，Animation实现动画效果
轮播图数字按钮纯css
06-07
可以使用伪类和CSS属性来实现轮播图数字按钮的效果。 首先，创建一个容器来包含轮播图和数字按钮。然后，为每个数字按钮创建一个a标签，并设置一个data属性来标识它们...以上就是使用纯CSS实现轮播图数字按钮的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值