css炫酷的按钮

最新推荐文章于 2024-06-07 13:59:56 发布
最新推荐文章于 2024-06-07 13:59:56 发布
阅读量323 收藏 1
点赞数 2
分类专栏： h5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43506403/article/details/115287093
版权
h5 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css3
8 篇文章 0 订阅
订阅专栏

css炫酷的按钮

效果一

在这里插入图片描述

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            min-height: 100vh;
        }
        
        a {
            position: relative;
            padding: 10px 30px;
            margin: 0 45px;
            color: #21ebff;
            text-decoration: none;
            font-size: 20px;
            text-transform: uppercase;
            transition: 0.5s;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
        }
        
        a:hover {
            background: #21ebff;
            color: #111;
            box-shadow: 0 0 50px #21ebff;
            transition-delay: 0.5s;
        }
        
        a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-top: 2px solid #21ebff;
            border-left: 2px solid #21ebff;
            transition: 0.5s;
            transition-delay: 0.5s;
        }
        
        a:hover::before {
            width: 100%;
            height: 100%;
            transition-delay: 0s;
        }
        
        a::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 10px;
            height: 10px;
            border-bottom: 2px solid #21ebff;
            border-right: 2px solid #21ebff;
            transition: 0.5s;
            transition-delay: 0.5s;
        }
        
        a:hover::after {
            width: 100%;
            height: 100%;
            transition-delay: 0s;
        }
        /* 自定义 */
        
        button {
            position: relative;
            padding: 10px 30px;
            margin: 0 45px;
            color: #21ebff;
            text-decoration: none;
            font-size: 20px;
            text-transform: uppercase;
            transition: 0.5s;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
            color: #111;
            box-shadow: 0 0 50px #21ebff;
            transition-delay: 0.5s;
            border-radius: 50%;
        }
        
        .text {
            position: relative;
            padding: 10px 30px;
            margin: 0 45px;
            color: #21ebff;
            text-decoration: none;
            font-size: 20px;
            text-transform: uppercase;
            transition: 0.5s;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0003);
            box-shadow: 0 0 50px #21ebff;
            transition-delay: 0.5s;
            border-radius: 50%;
        }
    </style>
    
	<body>
	    <a href="#">Button</a>
	    <button> fdfdf</button>
	    <div class="text"> dfsdfsdf </div>
	</body>

效果二

在这里插入图片描述

<style>
 @keyframes run {
            from {
                transform: rotate(0deg);
            }
            /*50%{
                    transform: rotate(180deg);
                }*/
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes daorun {
            from {
                transform: rotate(360deg);
            }
            /*50%{
                    transform: rotate(180deg);
                }*/
            to {
                transform: rotate(0deg);
            }
        }
        
        .sleepContentView {
            width: 242px;
            height: 242px;
            background-image: linear-gradient(#0cec17, rgb(12, 67, 219));
            border-radius: 50%;
            text-align: center;
            padding: 20px;
            font-size: 28px;
            box-sizing: border-box;
            animation: run 2.5s linear infinite;
            box-shadow: 0 0 50px #707070;
            /* -webkit-box-reflect: below 1px linear-gradient(transparent, #0003); */
        }
        
        .sleepContentView .circle {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 50%;
        }
        
        .contenttext {
            position: absolute;
            z-index: 99px;
            width: 190px;
            top: 100px;
            animation: daorun 2.5s linear infinite;
        }
 </style>

<body>
  <div class="sleepContentView">
        <div class="circle">
            <div class="contenttext">
                Button
            </div>

        </div>
    </div>
</body>

效果三

在这里插入图片描述


<style>
    .button-3d-2 {
        position: relative;
        background: #ecd300;
        background-image: linear-gradient(to right, rgb(248, 66, 20), transparent);
        /* background: radial-gradient(hsl(54, 100%, 50%), hsl(54, 100%, 40%)); */
        font-size: 1.4rem;
        text-shadow: 0 -1px 0 #c3af07;
        color: white;
        border: 1px solid hsl(54, 100%, 20%);
        border-radius: 100%;
        height: 120px;
        width: 120px;
        z-index: 4;
        outline: none;
        box-shadow: inset 0 1px 0 hsl(54, 100%, 50%), 0 2px 0 hsl(54, 100%, 20%), 0 3px 0 hsl(54, 100%, 18%), 0 4px 0 hsl(54, 100%, 16%), 0 5px 0 hsl(54, 100%, 14%), 0 6px 0 hsl(54, 100%, 12%), 0 7px 0 hsl(54, 100%, 10%), 0 8px 0 hsl(54, 100%, 8%), 0 9px 0 hsl(54, 100%, 6%);
    }
    
    .button-3d-2:active {
        margin-top: 2px;
        box-shadow: inset 0 1px 0 hsl(54, 100%, 50%), 0 2px 0 hsl(54, 100%, 16%), 0 3px 0 hsl(54, 100%, 14%), 0 4px 0 hsl(54, 100%, 12%), 0 5px 0 hsl(54, 100%, 10%), 0 6px 0 hsl(54, 100%, 8%), 0 7px 0 hsl(54, 100%, 6%);
    }
</style>

<body>
    <button class="button-3d-2">Circle!</button>

</body>
白鹭凡
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端——用CSS的常用样式制作一个炫酷的按钮
qq_53715074的博客
11-18 4028
border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right。background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复。Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的 右下⻆ 右上⻆ 左上⻆ 这⾥不再赘述。精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x： 显示横向滑动条。
【博学谷学习记录】超强总结，用心分享|纯css-炫酷的按钮
qq_36145110的博客
09-04 1526
纯css 炫酷的按钮
纯CSS实现动态炫酷按钮
最新发布
宇珩的博客
06-07 973
纯CSS实现炫酷按钮
flex布局案例
weixin_43837268的博客
10-18 301
<!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>Document&l.
92款超级漂亮的css按钮样式 复制即用
热门推荐
十一月廿七风雨大作
01-10 1万+
样式如图，代码已在结尾，按照序号复制粘贴便可直接用了：代码：
css特效之炫酷的发光按钮
前端新视界
10-30 574
css特效之炫酷的发光按钮
CSS3炫酷按钮
06-24
【CSS3炫酷按钮】是一种利用CSS3的强大功能和JavaScript的交互性来创建吸引人的、具有动态视觉效果的按钮设计。这种技术广泛应用于现代网页设计中，为用户提供更丰富的交互体验，增强网站的吸引力和用户体验。 CSS3...
6种非常炫酷的CSS3按钮边框动画特效
09-24
本文将深入探讨一款独特的CSS3按钮边框动画特效，它提供了6种不同风格的边框动画，让按钮在鼠标悬停时呈现出炫酷的变化。 首先，我们来看一下这些动画的基本结构。这个特效是通过HTML的`<button>`元素实现的，每个...
6种炫酷的CSS3按钮边框动画特效
12-13
本资源“6种炫酷的CSS3按钮边框动画特效”是一个集合，它包含六种独特且吸引人的按钮动画效果，能够提升网页界面的互动性和用户体验。 首先，CSS3的边框动画特性主要依赖于`transition`、`transform`和`animation`...
20种炫酷CSS3按钮样式和鼠标滑过特效
12-13
**CSS3库：20种炫酷按钮样式与鼠标滑过特效详解** 在网页设计中，按钮作为用户交互的关键元素，其样式和交互效果对于提升用户体验至关重要。本资源提供了一套精心设计的CSS3库，包含了20种不同的炫酷按钮样式以及...
12种炫酷css3显示分享按钮特效
12-13
这是一款集合了12种炫酷特效的css3分享按钮插件。该分享按钮特效有：3D翻转、3D开门效果、折纸效果、描边效果等。
CSS3按钮炫酷动画hover样式
10-25
CSS3按钮炫酷动画hover样式，
CSS3实现酷炫动画按钮特效.zip
07-04
CSS3实现酷炫动画按钮特效是一款当鼠标点击提交按钮以后，根据屏幕大小响应式改变动画播放效果。
HTML + CSS 光影按钮样式
05-25
2. **内阴影（Box Shadow）**：使用CSS的`box-shadow`属性来创建按钮的阴影效果，这可以模拟按钮的立体感。 ```css .shadow-button { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径...
CSS实现8种炫酷按钮
web前端开发教程htmlcssjs
12-06 1万+
今天给大家分享8种炫酷按钮的CSS实现。 1. 3D按钮1 现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮 该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面： HTML： <button class="button-3d-1">3D Button 1</button>...
使用css制作超级炫酷的流光按钮
CQXXTXX的博客
02-04 475
使用css制作流光按钮
纯css实现的一些好看的按钮
2301_79265530的博客
10-26 547
【代码】纯css实现的一些好看的按钮。
html5任意形状按钮,CSS实现8种炫酷按钮
weixin_32285357的博客
06-03 2026
在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。1. 3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮(文中只列出各种实现的关键代码，完整代码请参考CodePen)。该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，...
css炫酷的按钮样式表
05-05
以下是一些 CSS 炫酷的按钮样式表，供参考： 1. 渐变背景色按钮样式 ```css button.gradient-button { background: linear-gradient(to right, #ff416c, #ff4b2b); border: none; color: #fff; padding: 10px ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值