html+css 实现hover双层按钮

news2025/2/19 23:18:10

前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

文章目录

  • 效果
  • 原理解析
    • 1.每个按钮是由button,button::before,span,button::after组成。
    • 2.当按钮上有鼠标时,==hover效果触发==,==改变button::before和button::after==,并且从代码里可以看出==点击时==,==button::after==也会有一个==向下的位移==。
    • 3.具体的变换参数,直接==看代码==,可以一键复制,查看效果
  • 上代码,可以直接复制使用
    • 目录
    • html
    • css

效果

hover双层按钮效果展示

原理解析

1.每个按钮是由button,button::before,span,button::after组成。

hover双层按钮组成

2.当按钮上有鼠标时,hover效果触发改变button::before和button::after,并且从代码里可以看出点击时button::after也会有一个向下的位移

/*当hover时*/
.butBilayer:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.butBilayer:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}

/*点击时的效果*/
.butBilayer:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}

hover双层按钮点击效果演示

3.具体的变换参数,直接看代码,可以一键复制,查看效果

上代码,可以直接复制使用

目录

html

<!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>html+css 实现hover双层按钮</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
        html+css 实现hover双层按钮</h1>

    <div class="wrapper">
        <button class="butBilayer">
            <span>求点赞</span>
        </button>
        <button class="butBilayer">
            <span>求关注</span>
        </button>
        <button class="butBilayer">
            <span>求收藏</span>
        </button>
        <button class="butBilayer">
            <span>求转发</span>
        </button>
    </div>
</div>

</body>
</html>

css

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root
{
  --btn-bg-color:#fff;
  --font-color-black: #000;
  --btn-bg-color-hover: #FF5833;
}
.container{
  min-height: 100vh;
  background-color: #0e1538;
}
.wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:40px;
}

.butBilayer {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.butBilayer::after,
.butBilayer::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all 0.4s;
}

.butBilayer::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  border-radius: 10px;
}

.butBilayer::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}
/*当hover时*/
.butBilayer:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.butBilayer:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}
/*点击时的效果*/
.butBilayer:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}



到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕

整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1977549.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI人工智能开发环境配置

AI人工智能 为什么使用Python来开发AI 人工智能被认为是未来的趋势技术。 已经有了许多应用程序。 因此&#xff0c;许多公司和研究人员都对此感兴趣。 但是这里出现的主要问题是&#xff0c;在哪种编程语言中可以开发这些 AI 应用程序&#xff1f; 有各种编程语言&#xff0c…

Stable Diffusion绘画 | 图生图-基础使用介绍—提示词反推

按默认设置直接出图 拖入图片值图生图框中&#xff0c;保持默认设置&#xff0c;直接生成图片&#xff0c;出图效果如下&#xff1a; 因为重绘幅度0.7&#xff0c;所出图片与原图有差异&#xff0c;但整体的框架构图与颜色与原图类似。 输入关键词后出图 在正向提示词中输入…

PMP–知识卡片--Scrum框架

定义 Scrum框架包含由产品负责人、开发团队、敏捷专家构成的Scrum团队&#xff0c;以及活动工件。框架中的每一个组件都服务于一个特定的目标&#xff0c;且是Scrum成功和运用的基本要素。 Scrum的规则将角色、活动和工件绑定在一起&#xff0c;管理它们之间的关系和交互。 …

JavaEE 第2节 线程安全知识铺垫1

目录 一、通过jconsole.exe查看线程状态的方法 二、Thread类的几种常见属性 三、线程状态 一、通过jconsole.exe查看线程状态的方法 通过jconsole查看线程状态非常实用的方式 只要你安装了jdk&#xff0c;大致按照这个目录就可以找到这个可执行程序&#xff1a; 然后双击这…

YOLOv10改进 | 注意力篇 | YOLOv10引入24年最新的上下文锚注意力机制(CAA),并构建C2f_CAA(适用于小目标检测)

1. CAA介绍 1.1 摘要:遥感图像中的目标检测面临着越来越多的挑战,包括目标尺度的变化和背景的多样性。先前的方法试图通过扩大骨干的空间感受野来解决这些挑战,无论是通过大核卷积还是扩张卷积。然而,前者通常会引入相当大的背景噪声,而后者则会产生过于稀疏的特征表示。…

[CTF]-PWN:ORW题型综合解析

经典ORW&#xff1a; 例题&#xff08;极客大挑战 2019 Not Bad&#xff09;&#xff1a; 这里使用mmap函数创造了一个内存映射区域 从地址0x123000开始&#xff0c;大小位0x1000 权限为可写可执行&#xff08;可读0x1&#xff0c;可写0x2&#xff0c;可执行0x3&#xff09;…

Halcon 二维匹配

匹配&#xff1a;在训练图像中呈现一个所谓的模板。系统从这个模板中派生出一个模型&#xff0c;通过使用该模型来定位于搜索图像中的相似模板对象。此方法能够处理打光、杂乱、位置和旋转变换的图像。 匹配优点&#xff1a;鲁棒性和灵活性。匹配不需要对目标进行任何形式的分割…

50 选择结构

常见的选择结构有单分支选择结构、双分支选择结构、多分支选择结构及嵌套的分支结构&#xff0c;也可以构造跳转表来实现类似的逻辑。循环结构和异常处理结构中也可以实现带有 else 子句&#xff0c;可以看作特殊形式的选择结构。 所有的 Python 合法表达式都可以作为条件表达…

MySQL数据库入门:掌握数据管理的关键步骤!

前言 竹竹零将带您深入探索MySQL数据库的基础知识和实用技能&#xff0c;一同走进Java逻辑控制语句的 学习吧&#xff01;&#xff01;&#xff01; 本节目标 数据库的操作&#xff1a;创建数据库、删除数据库常用数据类型表的操作&#xff1a;创建表、删除表 1. 数据库的操作…

跨域以及解决方案

禹神&#xff1a;一小时彻底搞懂跨域&解决方案_哔哩哔哩_bilibili该直播回放对跨域的多种解决方案进行了梳理&#xff0c;内容包括&#xff1a;分析同源策略、分析预检请求、跨域的多种解决方案&#xff08;CORS、JSONP、代理&#xff09;、同时也从后端人员角度梳理了各种…

计算机毕业设计选题推荐-学生作业管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

一次性下发100w的优惠券/短信/二维码,兼顾线程池参数可配置

1、场景需求分析 针对6.18,11.11这种场景,平台一次性发布500w张优惠券,或者对于锁单用户统一发下100w张确认信息,同时我们平时有抢购茅台的场景,京东一次性发布10w个验证码,主要是针对高并发多线程大数据批处理任务的场景,一般用于二维码、优惠券、邮件、短信等场景。 …

MyBatis的适用场合与优势

MyBatis的适用场合与优势 1、适用场合2、优势 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、适用场合 SQL灵活控制&#xff1a; 适合需要精确控制SQL语句生成和执行的项目。 高性能需求&#xff1a; 对于性能要求高的系统&#xff0c;…

02:【stm32】工程模板的创建

工程模板的创建 1、创建工程文件2、创建STM32的启动文件3、Keil软件里面添加启动文件4、创建我们编写程序的文件夹5、创建存放标准库函数的文件夹6、Keil软件的一些设置 1、创建工程文件 2、创建STM32的启动文件 ①创建Start文件夹用来保存STM32的启动文件 ②下载STM32的固件库…

Apple在Swift中引入同态加密

--->更多内容&#xff0c;请移步“鲁班秘笈”&#xff01;&#xff01;<--- 在计算过程中确保数据隐私和安全性很重要&#xff0c;尤其是在使用云服务。传统的加密方法要求在处理数据之前对数据进行解密&#xff0c;使其面临潜在风险。同态加密是隐私计算的分支&#xf…

C Primer Plus 第5章——第二篇

你该逆袭了 第5 章:重点摘录 三、表达式和语句1、表达式2、语句&#xff08;1&#xff09;副作用 和 序列点&#xff08;a&#xff09;副作用&#xff08;b&#xff09;序列点1、完整表达式 3、复合语句&#xff08;块&#xff09; 四、类型转换1、强制类型转换运算符2、总结&a…

修改 WSL 安装的子系统的位置,节约C盘空间

问题描述 由于 WSL 玩了一阵子&#xff0c;发现C盘的磁盘空间快没了&#xff0c;如下图所示 感觉以后还是不要磁盘分区了&#xff0c;全部在C盘也没什么不好的。 挪动子系统方法 如下图所示&#xff0c;为了方便演示&#xff0c;我们安装了 ubuntu 子系统&#xff0c;并且打…

快讯 | AI牙医震撼登场:15分钟完成牙冠准备,速度超人类8倍!

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

计算几何 点乘 两点间距离 两向量夹角

点乘 点乘&#xff08;也称为内积、标量积或数量积&#xff09;是线性代数中两个向量之间的一种运算&#xff0c;其结果是一个标量&#xff08;即一个单一的数&#xff0c;而不是向量&#xff09;。对于两个n维向量a(a 1 ,a 2 ,…,a n )和b(b 1 ,b 2 ,…,b n )&#xff0c;它们…

翻译: 梯度下降 深度学习神经网络如何学习一

在上一节影片里我讲解了神经网络的结构 首先我们来快速回顾一下 在本节影片里&#xff0c;我们有两个目标 首介绍梯度下降的概念 它不仅是神经网络工作的基础 也是很多其他机器学习方法的基础 然后我们会研究一下这个特别的网络是如何工作的 以及这些隐藏的神经元层究竟在寻找什…