一些button的hover效果

最新推荐文章于 2023-12-21 21:57:59 发布
最新推荐文章于 2023-12-21 21:57:59 发布
阅读量2.4k 收藏 8
点赞数 1
分类专栏： CSS3 CSS 文章标签： css html5 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_mitsuha/article/details/120431148
版权
CSS3 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏 
        .app {
            background-color: #000;
            padding: 20px;
        }

        .btn {
            width: 80px;
            height: 30px;
            border-radius: 8px;
            color: #fff;
            background-color: steelblue;
            margin: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn-text{
            text-align: center;
            line-height: 30px;
        }

        @keyframes btnAnimate {
            from {
                border: 2px solid #fff;
                width: 82px;
                height: 34px;
            }

            to {
                border: 1px solid rgba(255, 255, 255, 0);
                width: 100px;
                height:45px;
            }
        }

        .btn:hover:before {
            content: '';
            position: absolute;
            width: 80px;
            height: 30px;
            border-radius: 10px;
            animation: btnAnimate 3s ease;
            transition: all 0.5s ease;
        }

<div class="app">
    <div class="btn">
        <div class="btn-text">btn</div>
    </div>
</div>

image

btn变成圆形时

image

btn加上旋转效果
        @keyframes btnAnimate {
            from {
                transform: rotate(0deg);
                border: 4px solid #fff;
                width: 82px;
                /* height: 34px; */
                height: 82px;
                border-radius: 50%;
            }

            to {
                transform: rotate(360deg);
                border: 1px solid rgba(255, 255, 255, 0);
                width: 100px;
                /* height:45px; */
                height: 100px;
                border-radius: 50%;
            }
        }

image

btn加上漾开效果
@keyframes btnAnimate {
            0% {
                border: 4px solid rgba(255,255,255,0.3);
                width: 82px;
                height: 82px;
                background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 20%, rgba(255,255,255,.3) 30%,rgba(255,255,255,.65) 50%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.6) 80%, rgba(255,255,255,1) 95%,rgba(255,255,255,0.3) 100%);
            }
            20% {
                background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 40%, rgba(255,255,255,.3) 50%,rgba(255,255,255,.65) 70%, rgba(255,255,255,.55) 80%, rgba(255,255,255,.6) 85%, rgba(255,255,255,1) 90%,rgba(255,255,255,0.3) 100%);
            }
            40% {
                background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%, rgba(255,255,255,.3) 70%,rgba(255,255,255,.65) 80%, rgba(255,255,255,.55) 85%, rgba(255,255,255,.6) 87%, rgba(255,255,255,1) 92%,rgba(255,255,255,0.3) 100%);
            }
            60% {
                background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 80%, rgba(255,255,255,.3) 82%,rgba(255,255,255,.65) 88%, rgba(255,255,255,.55) 90%, rgba(255,255,255,.6) 95%, rgba(255,255,255,1) 97%,rgba(255,255,255,0.3) 100%);
            }
            80% {
                background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 100%);
            }

            100% {
                border: 1px solid rgba(255,255,255,0);
                width: 100px;
                height: 100px;
            }
        }

image

btn漾开实线效果
 @keyframes btnAnimate {
            0% {
                border: 4px solid rgba(255,255,255,0.3);
                width: 82px;
                height: 82px;
                background: radial-gradient(rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 2%, rgba(255,255,255,0.1) 100%);
            }
            10% { background: radial-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 8%, rgba(255,255,255,.8) 10%, rgba(255,255,255,.2) 12%, rgba(255,255,255,0.1) 100%)}
            20% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 20%, rgba(255,255,255,.8) 22%,rgba(255,255,255,.2) 24%, rgba(255,255,255,.1) 100%);}
            30% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 30%, rgba(255,255,255,.8) 32%,rgba(255,255,255,.2) 34%, rgba(255,255,255,.1) 100%);}
            40% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 40%, rgba(255,255,255,.8) 42%,rgba(255,255,255,.2) 44%, rgba(255,255,255,.1) 100%);}
            50% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 50%, rgba(255,255,255,.8) 52%,rgba(255,255,255,.2) 54%, rgba(255,255,255,.1) 100%);}
            60% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 60%, rgba(255,255,255,.8) 62%,rgba(255,255,255,.2) 64%, rgba(255,255,255,.1) 100%);}
            70% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 70%, rgba(255,255,255,.8) 72%,rgba(255,255,255,.2) 74%, rgba(255,255,255,.1) 100%);}
            80% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 80%, rgba(255,255,255,.8) 82%,rgba(255,255,255,.2) 84%, rgba(255,255,255,.1) 100%);}
            90% {background: radial-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 90%, rgba(255,255,255,.8) 92%,rgba(255,255,255,.2) 94%, rgba(255,255,255,.1) 100%);}
            100% {
                border: 1px solid rgba(255,255,255,0);
                width: 100px;
                height: 100px;
            }
        }

image

加上调节btn大小
@keyframes btnSizeAnimate {
            from{width: 80px;height: 80px;}
            to{width: 85px;height: 85px;}
        }
.btn:hover{
            animation: btnSizeAnimate 0.7s linear; /* 这里调节动画时间可以让两个动画得配合更加自然 */
            transition: all 0.3s linear;
        }

image

加上调整位置
@keyframes btnPositionAnimate {
            from{top:0px;}
            to{top: -3px;}
        }
        .btn:hover{
            /* animation: btnSizeAnimate 0.7s linear; */
            /* transition: all 0.3s linear; */
            animation: btnPositionAnimate 0.6s linear;
            transition: all 0.8s linear;
        }

image

border-shadow控制的一种按钮

#000000cc代表相同的顏色 rgb(0 0 0 / 80%)（略透明的黑色）。具体可看
这个按钮的来源链接：https://melodyjerry.gitee.io/simpleindex/

        .btn {
            width: 90px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            box-shadow: 18px 18px 30px rgb(0 0 0 / 10%), -18px -18px 30px rgb(255 255 255);
        }

        .btn:hover {
            box-shadow: 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px rgb(255 255 255 / 80%), inset 18px 18px 30px rgb(0 0 0 / 10%), inset -18px -18px 30px rgb(255 255 255);
            transition: box-shadow .2s ease-out;
        }

<div class="btn">
    <a href="http://www.baidu.com">
        <img src="./image/MyIndex_files/baidu.png" alt="">
    </a>
</div>

image

底部展开收起的btn组
        .btn-list {
            display: flex;
            flex-direction: column;
            position: absolute;
            bottom: 10px;
            right: 15px;
            padding: 0 10px;
        }

        .btn-item {
            display: flex;
            align-items: center;
        }

        .btn {
            display: inline-block;
            background-color: #fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin: 8px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 5px 5px 10px rgb(0 0 0 / 10%), -5px -5px 10px rgb(255 255 255);
            z-index: 9;
        }

        .btn:hover {
            /* box-shadow: 0px 0px 0px rgb(0 0 0 / 10%), 0px 0px 0px rgb(255 255 255 / 60%), inset 5px 5px 10px rgb(0 0 0 / 10%), inset -5px -5px 10px rgb(255 255 255); */
            /* transition: box-shadow .2s ease-out; */
        }

        .btn-arrow {
            transform: rotate(180deg);
            transition: all 2s ease;
        }

        .btn i {
            font-size: 25px;
        }

        .btn-tip {
            position: absolute;
            font-size: 12px;
            color: #fff;
            padding: 5px;
            align-items: center;
            left: -30px;
            /* display: none; */
            visibility: hidden;
            z-index: -1;
        }

        .btn-tip-content {
            background-color: #000;
            white-space: nowrap;
            padding: 8px;
            border-radius: 5px;
            display: inline-block;
        }

        .btn-tip:after {
            position: absolute;
            content: '';
            border-top: 10px solid transparent;
            border-left: 10px solid #000;
            border-bottom: 10px solid transparent;
            top: 11px;
        }

    <div class="app">
        <div class="btn-list">
            <div class="btn-list-content">
                <div class="btn-item">
                    <div class="btn btn-top"><i class="iconfont icon-retop"></i></div>
                    <div class="btn-tip"><div class="btn-tip-content">回顶</div></div>
                </div>
                <div class="btn-item">
                    <div class="btn btn-theme"><i class="iconfont icon-DarkTheme"></i></div>
                    <div class="btn-tip"><div class="btn-tip-content">明/暗</div></div>
                </div>
            </div>
            <div class="btn-item">
                <div class="btn btn-arrow"><i class="iconfont icon-arrow-down"></i></div>
                <div class="btn-tip"><div class="btn-tip-content">收起</div></div>
            </div>
        </div>
    </div>
    <script>
        var arrowBtn = document.querySelector('.btn-arrow');
        var arrowBtnItem = arrowBtn.parentNode;
        var arrowBtnTip = arrowBtnItem.children[1];
        var btnistContent = document.querySelector('.btn-list-content');
        arrowBtn.addEventListener('click', function () {
            let isRotate = arrowBtn.style.transform == 'rotate(0deg)';
            arrowBtn.style.transform = isRotate ? 'rotate(180deg)' : 'rotate(0deg)';
            arrowBtn.style.transition = isRotate ?'all 0.5s ease':'all 1.5s ease';
            arrowBtnTip.children[0].innerHTML = isRotate ?'收起':'展开';
            btnistContent.style.transform = isRotate ?'translateY(0px)':'translateY(120px)';
            setTimeout(() => { btnistContent.style.display = isRotate ?'block':'none'; }, 500)
            btnistContent.style.transition = isRotate ?'all 1s ease':'all 2s ease';
            
        })

        var btns = document.querySelectorAll('.btn');
        var btnTips = document.querySelectorAll('.btn-tip');
        for (let i = 0; i < btns.length ; i++) {
            btns[i].addEventListener('mouseenter', btnTipShow, { self: true });
            btns[i].addEventListener('mouseleave', btnTipShow, { self: true });
        }

        function btnTipShow(e) {
            let btnNode = e.target;
            let btnItemNode = btnNode.parentNode;
            let btnTip = btnItemNode.children[1];
            if (btnTip) {
                btnTip.style.zIndex = btnTip.style.zIndex == '0' ? '-1' : '0';
                btnTip.style.visibility = btnTip.style.visibility == 'visible' ? 'hidden':'visible';
                btnTip.style.left = btnTip.style.left == '-60px' ? '-30px' : '-60px';
                btnTip.style.transition = btnTip.style.transition == 'all .5s ease'?'all .2s ease':'all .5s ease';
            }
        }

    </script>

image

桔子柠檬水
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css 实现hover右遮罩按钮
宝码香车的博客
08-05 928
这个效果看着是添加一个橘黄色的弧形背景其实......。附具体代码，深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。
八种button的hover效果
qq_36582776的博客
06-23 1597
按钮的hover特效
设置多个按钮的:hover样式
最新发布
简单点的博客
12-21 550
设置多个按钮的:hover样式
最强9种css3圆形按钮hover鼠标经过动画效果
08-10
只要很少的资源分，不要花钱买
button hover
知屋安砖
07-08 323
button hover示例HTMLCSS 更多有趣示例 尽在小红砖社区 示例 HTML <div class="buttons"> <div class="container"> <h1>歪みエフェクト</h1> <p>Distortion Effect</p> <a href="https://twitter.com/masuwa1018" class="btn effect04" d
Button按钮效果
07-10
按钮特效处理 selector结合shape定义按钮图片
css动画按钮button hover效果
yun的博客
08-27 5855
一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh; } button { background: #5f55af; borde
按钮渐变hover动态效果
weixin_30699831的博客
08-02 319
按钮hover动态效果 .login-btn { width: 100%; background: linear-gradient(to right, #102140, #64C1E1,#3F6C96); background-size: 200%; color: #fff; ...
css3 一个button hover 效果
Jinmy的博客
07-21 3050
<!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>Bu.
按钮悬停效果(Button Hover Effects)
知屋安砖
08-10 2005
按钮悬停效果Button Hover Effects示例HTMLCSSJS 更多有趣示例 尽在小红砖社区 示例 HTML <a href="" class="button">Button</a> <a href="" class="button reverse dark">Reverse</a> <a href="" class="button fast white">Fast</a> <!-- dribbble -->
Slice-button-hover-effect
03-22
"Slice-button-hover-effect" 是一种创新的按钮悬停效果，它为用户提供了独特的交互体验，提升了网页的动态美感。这种效果通常通过CSS3的动画技术和JavaScript实现，能够使按钮在鼠标悬停时产生切割或切片的动态变化...
带悬停动画效果的CSS按钮HoverButtons
08-10
带悬停动画效果的 CSS 按钮：Hover Buttons
10种炫酷鼠标hover按钮CSS3动画特效
12-13
这是一款炫酷的鼠标hover按钮CSS3动画特效。该按钮CSS3动画特效包括10种鼠标hover效果。按钮动画的制作通过CSS3 transition和keyframes帧动画完成。
cocos2d实现button(按钮)效果
02-28
这半年一直在用object-c开发一个ios游戏。使用cocos2d和box2d 。开发游戏变的简单多了。这游戏开发了半年多了。直到最近这个游戏停止了，因为资金问题，老大没法在发更多的工资了。哎，真的非常遗憾，我一个人完成游戏的编辑器开发，脚本开发，游戏代码开发，很不容易，因为我学object-c,coco2d才看了2个星期的书就直接开发了,以前是搞c++的吗。感觉4个人开发游戏真的很累，游戏为了脱颖出更加真实的效果还使用了物理引擎,在老大的同意的情况下，我共享cocos2d自己写的一些大家比较常用的，因为cocos2d有些控件不怎么好用或者没有,反正我觉得是这样的。如slider(滑块),button(按钮),RollNumber(数字滚动),Progress(进度条)....控件一一在我的博客里面公布，可以直接使用.源码打包下载 开发人员:Jason's.Alex QQ:531401335 csdn博客:http://blog.csdn.net/RuShrooM
button hover逐渐变色_前端项目001 Vue 造轮子之Button
weixin_39946355的博客
11-22 434
頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。总有人问:前端开发中是哪些轮子值得实现一遍。但是你造过那些轮子呢？这是我造过的！声明：本项目所有的UI，来自于方应航，我只做简单修改！输入框 · 轱辘 · 语雀​www.yuque.com所有的项目按照流程按照一下目录进行需求分析UI设计项目知识点项目难点（在3中解决，用饮用块的方式标识）1. 需求分析1. 1 Button功能分析该轮子只具有点...
html 按键hover,按钮hover效果
weixin_36117191的博客
06-21 702
今天看一个网站的按钮效果不错就试着做了一下，可是怎么也不出效果，大家看下问题在哪里。a标签没有添加overflow: hidden;效果是正常，以添加这个属性就出错了(背景不能完全覆盖)，要点一下才正常，但是如果换成别的标签，即使点击也不会正常。Document* {margin: 0;padding: 0;box-sizing: border-box;}a {width: 300px;heigh...
按钮hover填充效果
ICode联盟
09-10 148
按钮hover填充效果，鼠标悬停的时候按钮线条、填充颜色等效果。
CSS八种让人眼前一亮的HOVER效果
qq_40957072的博客
08-19 876
CSS八种让人眼前一亮的HOVER效果 一, 发送效果 <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> #send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh; } button { background: #5f55
【特效】几种实用的按钮hover效果
weixin_30241919的博客
01-18 648
效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3095.htm html: <ul class="btn"> <li class="btn1"> <div></div> <span>你说人生艳丽我没有异议</span> </l...
css button添加hover效果
06-10
好的，可以添加以下CSS代码实现hover效果： ``` button:hover { background-color: #4CAF50; color: white; } ``` 这会在鼠标悬停在按钮上时改变按钮的背景颜色和文字颜色。你可以将 `background-color` 和 `color` 替换为你想要的颜色值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值