当前位置： 首页 > news >正文

html+css 实现hover双层按钮

news 2026/2/10 9:01:53

前言：哈喽，大家好，今天给大家分享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()）操作

相关文章：

html+css 实现hover双层按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…...

编程日记 2024/8/4 10:24:54

SPIFFS与LittleFS的对gz文件格式的区别

SPIFFS 只能安装在Arduino上。LittleFS支持Arduino IDE和VScode的 PlatformIO。 SPIFFS serveStatic: server.serveStatic("/", SPIFFS, "/") 负责提供 SPIFFS 文件系统中的文件。您可以在 SPIFFS 上放置 .gz 文件&#xff0c;并该方法将自动处理它们。 …...

编程日记 2024/8/4 10:23:53

STM32L051K8U6-开发资料

STM32L051测试 &#xff08;四、Flash和EEPROM的读写&#xff09;-云社区-华为云 (huaweicloud.com) STM32L051测试 &#xff08;四、Flash和EEPROM的读写&#xff09; - 掘金 (juejin.cn) STM32L0 系列 EEPROM 读写&#xff0c;程序卡死&#xff1f;_stm32l0片内eeprom_stm3…...

编程日记 2024/8/4 10:22:52

Markdown语法学习

Markdown学习 一、基础语法讲解 1. 换行 本行末尾双空格然后回车&#xff08;在Typora的中直接回车也可以&#xff09; 2. 换段 本段末尾两次回车 3. 加粗 **加粗** __加粗__效果&#xff1a;加粗 4. 斜体 *加粗* _加粗_效果&#xff1a;斜体 5. 斜体加粗 ***加粗**…...

编程日记 2024/8/4 10:19:48

[最短路Floyd]，启动！！！

B3647 【模板】Floyd #include<bits/stdc.h> #define ll long long #define fi first #define se second #define pb push_back #define PII pair<int,int > #define IOS ios::sync_with_stdio(false),cin.tie(0),cout.tie(0) using namespace std; const int N …...

编程日记 2024/8/4 10:16:45

7月29（信息差）

&#x1f30d;最强模型 Llama 3.1 如期而至&#xff01;扎克伯格最新访谈&#xff1a;Llama 会成为 AI 界的 Linux &#x1f384;谷歌AlphaProof攻克国际奥赛数学题 https://www.51cto.com/article/793632.html ✨SearchGPT第一波评测来了&#xff01;响应速度超快还没广告&…...

编程日记 2024/8/4 10:13:42

ubuntu中禁止使用鼠标拖动来移动文件

windows和ubuntu中都可以拖动文件到其他路径&#xff0c;然后达到移动文件的目的。 这种方式有好处也有坏处&#xff0c;好处是移动文件方便了&#xff0c;坏处是误操作后会造成故障&#xff0c;尤其是ubuntu中&#xff0c;本身鼠标就特别灵敏并且操作不便&#xff0c;拖动一个…...

编程日记 2024/8/4 10:12:41

【密码学】椭圆曲线密码体制（ECC）

椭圆曲线密码体制&#xff08;Elliptic Curve Cryptography, ECC&#xff09;是一种基于椭圆曲线数学特性的公钥密码系统。在介绍椭圆曲线之前&#xff0c;我们先来了解一下椭圆曲线的基本概念。 一、椭圆曲线是什么&#xff1f; &#xff08;1&#xff09;椭圆曲线的数学定义…...

编程日记 2024/8/4 10:11:40

第25集《大佛顶首楞严经》

丑二、腾疑细释 分二&#xff1a;寅一、阿难腾疑&#xff1b;寅二、如来细释 请大家打开讲义第五十六页&#xff0c;“丑二、腾疑细释”。 本经的修学重点&#xff0c;就是修学首楞严王三昧。它的整个重点&#xff0c;其实就是一个心地法门。我们在行菩萨道的时候慢慢会发觉…...

编程日记 2024/8/4 10:06:35

python 读写文件之 open 和 with open() 详细解析

python 读写文件之 open 和 with open() 详细解析 文章目录 python 读写文件之 open 和 with open() 详细解析1. open() 和 with open() 能打开不同的文件类型吗&#xff1f;2. 文本文件和二进制文件的区别2.1 文本文件 (Text Files)2.2 二进制文件 (Binary Files)区别 3. 读文…...

编程日记 2024/8/4 10:05:34

操作系统：内存----知识点

什么是虚拟内存&#xff1f; 虚拟内存简称虚存&#xff0c;是计算机系统内存管理的一种技术。它是相对于物理内存而言的&#xff0c;可以理解为“假的”内存。它使得应用程序认为它拥有连续可用的内存&#xff08;一个连续完整的地址空间&#xff09;&#xff0c;允许程序员编…...

编程日记 2024/8/4 10:04:32

pfx如何配置到nginx中

有pfx文件的时候如何在nginx上使用 好的&#xff0c;如果您已经确认没有中间证书&#xff08;或中间证书内容为空&#xff09;&#xff0c;那么可以直接使用服务器证书和私钥。以下是简化后的步骤&#xff1a; 从PFX文件中导出私钥&#xff1a; openssl pkcs12 -in xxx.com.pfx…...

编程日记 2024/8/4 10:01:29

详细测评下搬瓦工香港CN2 GIA VPS

搬瓦工香港VPS分移动CMI和电信CN2 GIA两个大类&#xff0c;一个属于骨干网&#xff0c;一个属于轻负载。搬瓦工的香港CN2 GIA根据测试来看实际上是CN2 GIABGP&#xff0c;并非三网纯CN2 GIA。详细测评数据如下&#xff1a; 用FIO再给测试一下硬盘I/O&#xff0c;可以仔细看看数…...

编程日记 2024/8/4 9:59:27

Java中的五种线程池类型

Java中的五种线程池类型 1. CachedThreadPool &#xff08;有缓冲的线程池&#xff09;2. FixedThreadPool &#xff08;固定大小的线程池&#xff09;3. ScheduledThreadPool&#xff08;计划线程池&#xff09;4. SingleThreadExecutor &#xff08;单线程线程池&#xff09…...

编程日记 2024/8/4 9:58:26

FFmpeg Windows安装教程

一. 下载ffmpeg 进入Download FFmpeg网址&#xff0c;点击下载windows版ffmpeg。 下载第一个essentials版本就行。 二. 环境配置 上面源码解压后如下 将bin添加到系统环境变量 验证安装是否成功&#xff0c;输入ffmpeg –version&#xff0c;显示版本即为安装成功。...

编程日记 2024/8/4 9:54:23

‘#‘ is not followed by a macro parameter 关于宏定义的错误

今天在项目代码上想定义一个这样的宏&#xff0c;结果编译错误&#xff0c;这个宏定义类似这样的&#xff1a; #define DELETE_FILE_DPP(key) \ #ifdef PLATFORM_DPP \delete_file(&key); \ #endif 因为有平台之分需要用到编译宏&#xff0c;但不想每个调用的地方都写 #i…...

编程日记 2024/8/4 9:53:21

内网穿透--meterpreter端口转发实验

实验背景 通过公司带有防火墙功能的路由器接入互联网&#xff0c;然后由于私网IP的缘故&#xff0c;公网无法直接访问内部主机&#xff0c;则需要通过已连接会话&#xff0c;代理穿透访问内网主机服务。 实验设备 1.路由器一台 2.内网 Win 7一台 3.公网 Kali 一台 4.网络 …...

编程日记 2024/8/4 9:51:19

Python 数据类：减少样板并提高可读性

一.介绍 在本文中&#xff0c;我们将了解数据类。Python 3.7 引入了数据类&#xff0c;这是一个强大的功能&#xff0c;它简化了创建主要用于存储数据的类的过程。数据类减少了样板代码并提供有用的默认行为&#xff0c;使您的代码更简洁、更高效。 二.为什么要使用数据类&am…...

编程日记 2024/8/4 9:50:18

家庭教育系列—北京海淀区”鸡娃“攻略

文章目录 1. 背景介绍2. 道3. 法3.1 **目标设定（Goal Setting）**3.2 **学习计划（Study Planning）**3.3 **资源利用（Resource Utilization）**3.4 **能力培养（Skill Development）**4. 术4.1 英语4.1.1 启蒙4.1.2 启蒙之后4.3 数学4.3.1 奥数4.3.2 普通数学知识4.4 语文4.…...

编程日记 2024/8/4 9:49:17

DLMS/COSEM中的信息安全：DLMS/COSEM安全概念（下）

3.安全语境 安全语境定义了与加密转换有关的安全属性，并包括以下元素： ——安全组件，确定可用的安全算法。 ——安全策略，在AA内对所有xDLMS APDU确定将应用的那种保护； ——与给定的安全算法相关的安全资料，包含安全密钥、初始化向量、公共密钥证书等。由于安全资料是针…...

编程日记 2024/8/4 9:48:16

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/10/31 16:09:12

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2026/1/28 16:00:47

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...

编程新知 2025/8/26 4:33:55

2025-05-08-deepseek本地化部署

title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek&#xff1a;小白也能轻松搞定&#xff01; 如何给本地部署的 DeepSeek 投喂数据&#xff0c;让他更懂你 [实验目的]&#xff1a;理解系统架构与原…...

编程新知 2026/2/4 16:20:49