html+css 实现hover双层按钮
前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
文章目录
- 效果
- 原理解析
- 1.每个按钮是由button，button::before，span，button::after组成。
- 2.当按钮上有鼠标时，==hover效果触发==，==改变button::before和button::after==,并且从代码里可以看出==点击时==，==button::after==也会有一个==向下的位移==。
- 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
- 上代码，可以直接复制使用
- 目录
- html
- css
效果
原理解析
1.每个按钮是由button，button::before，span，button::after组成。
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%);
}
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双层按钮
前言：哈喽，大家好，今天给大家分享htmlcss 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 文…...
SPIFFS与LittleFS的对gz文件格式的区别
SPIFFS 只能安装在Arduino上。LittleFS支持Arduino IDE和VScode的 PlatformIO。 SPIFFS serveStatic: server.serveStatic("/", SPIFFS, "/") 负责提供 SPIFFS 文件系统中的文件。您可以在 SPIFFS 上放置 .gz 文件，并该方法将自动处理它们。 …...
STM32L051K8U6-开发资料
STM32L051测试 （四、Flash和EEPROM的读写）-云社区-华为云 (huaweicloud.com) STM32L051测试 （四、Flash和EEPROM的读写） - 掘金 (juejin.cn) STM32L0 系列 EEPROM 读写，程序卡死？_stm32l0片内eeprom_stm3…...
Markdown语法学习
Markdown学习 一、基础语法讲解 1. 换行 本行末尾双空格然后回车（在Typora的中直接回车也可以） 2. 换段 本段末尾两次回车 3. 加粗 **加粗** __加粗__效果：加粗 4. 斜体 *加粗* _加粗_效果：斜体 5. 斜体加粗 ***加粗**…...
[最短路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 …...
7月29（信息差）
🌍最强模型 Llama 3.1 如期而至！扎克伯格最新访谈：Llama 会成为 AI 界的 Linux 🎄谷歌AlphaProof攻克国际奥赛数学题 https://www.51cto.com/article/793632.html ✨SearchGPT第一波评测来了！响应速度超快还没广告&…...
ubuntu中禁止使用鼠标拖动来移动文件
windows和ubuntu中都可以拖动文件到其他路径，然后达到移动文件的目的。 这种方式有好处也有坏处，好处是移动文件方便了，坏处是误操作后会造成故障，尤其是ubuntu中，本身鼠标就特别灵敏并且操作不便，拖动一个…...
【密码学】椭圆曲线密码体制（ECC）
椭圆曲线密码体制（Elliptic Curve Cryptography, ECC）是一种基于椭圆曲线数学特性的公钥密码系统。在介绍椭圆曲线之前，我们先来了解一下椭圆曲线的基本概念。 一、椭圆曲线是什么？ （1）椭圆曲线的数学定义…...
第25集《大佛顶首楞严经》
丑二、腾疑细释 分二：寅一、阿难腾疑；寅二、如来细释 请大家打开讲义第五十六页，“丑二、腾疑细释”。 本经的修学重点，就是修学首楞严王三昧。它的整个重点，其实就是一个心地法门。我们在行菩萨道的时候慢慢会发觉…...
python 读写文件之 open 和 with open() 详细解析
python 读写文件之 open 和 with open() 详细解析 文章目录 python 读写文件之 open 和 with open() 详细解析1. open() 和 with open() 能打开不同的文件类型吗？2. 文本文件和二进制文件的区别2.1 文本文件 (Text Files)2.2 二进制文件 (Binary Files)区别 3. 读文…...
操作系统：内存----知识点
什么是虚拟内存？ 虚拟内存简称虚存，是计算机系统内存管理的一种技术。它是相对于物理内存而言的，可以理解为“假的”内存。它使得应用程序认为它拥有连续可用的内存（一个连续完整的地址空间），允许程序员编…...
pfx如何配置到nginx中
有pfx文件的时候如何在nginx上使用 好的，如果您已经确认没有中间证书（或中间证书内容为空），那么可以直接使用服务器证书和私钥。以下是简化后的步骤： 从PFX文件中导出私钥： openssl pkcs12 -in xxx.com.pfx…...
详细测评下搬瓦工香港CN2 GIA VPS
搬瓦工香港VPS分移动CMI和电信CN2 GIA两个大类，一个属于骨干网，一个属于轻负载。搬瓦工的香港CN2 GIA根据测试来看实际上是CN2 GIABGP，并非三网纯CN2 GIA。详细测评数据如下： 用FIO再给测试一下硬盘I/O，可以仔细看看数…...
Java中的五种线程池类型
Java中的五种线程池类型 1. CachedThreadPool （有缓冲的线程池）2. FixedThreadPool （固定大小的线程池）3. ScheduledThreadPool（计划线程池）4. SingleThreadExecutor （单线程线程池）…...
FFmpeg Windows安装教程
一. 下载ffmpeg 进入Download FFmpeg网址，点击下载windows版ffmpeg。 下载第一个essentials版本就行。 二. 环境配置 上面源码解压后如下 将bin添加到系统环境变量 验证安装是否成功，输入ffmpeg –version，显示版本即为安装成功。...
‘#‘ is not followed by a macro parameter 关于宏定义的错误
今天在项目代码上想定义一个这样的宏，结果编译错误，这个宏定义类似这样的： #define DELETE_FILE_DPP(key) \ #ifdef PLATFORM_DPP \delete_file(&key); \ #endif 因为有平台之分需要用到编译宏，但不想每个调用的地方都写 #i…...
内网穿透--meterpreter端口转发实验
实验背景 通过公司带有防火墙功能的路由器接入互联网，然后由于私网IP的缘故，公网无法直接访问内部主机，则需要通过已连接会话，代理穿透访问内网主机服务。 实验设备 1.路由器一台 2.内网 Win 7一台 3.公网 Kali 一台 4.网络 …...
Python 数据类：减少样板并提高可读性
一.介绍 在本文中，我们将了解数据类。Python 3.7 引入了数据类，这是一个强大的功能，它简化了创建主要用于存储数据的类的过程。数据类减少了样板代码并提供有用的默认行为，使您的代码更简洁、更高效。 二.为什么要使用数据类&am…...
家庭教育系列—北京海淀区”鸡娃“攻略
文章目录 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.…...
DLMS/COSEM中的信息安全：DLMS/COSEM安全概念（下）
3.安全语境 安全语境定义了与加密转换有关的安全属性，并包括以下元素： ——安全组件，确定可用的安全算法。 ——安全策略，在AA内对所有xDLMS APDU确定将应用的那种保护； ——与给定的安全算法相关的安全资料，包含安全密钥、初始化向量、公共密钥证书等。由于安全资料是针…...
基于 systemc-2.3.1的virtual device 接入 qemu-arm
1，下载systemc-2.3.1 下载网址： SystemC Files $ wget https://www.accellera.org/images/downloads/standards/systemc/systemc-2.3.1.tgz 2，编译安装 systemc-2.3.1 tar zxf systemc-2.3.1.tgz cd systemc-2.3.1/ export CXXg mkdir bu…...
(七)自动化测试
1. 简述什么是UI自动化测试？ 正确回答通过率：78.0%[ 详情 ] 推荐指数： ★★★★ 试题难度： 中级 UI自动化测试（User Interface Automation Testing）是一种通过编写脚本或使用自动化测试工具，对用户界面（UI）进行自动化测试的方法。它可以模拟用户与应用程序或网站的交…...
【信创】virtualbox内虚拟机连接U盘 _ 统信 _ 麒麟 _ 中科方德
原文链接：【信创】virtualbox内虚拟机连接U盘 | 统信 | 麒麟 | 中科方德 Hello，大家好啊！今天给大家带来一篇关于在信创操作系统上使用VirtualBox虚拟机连接物理主机U盘的文章。在使用VirtualBox虚拟机时，有时候需要将物理主机上的…...
【2024】Datawhale AI夏令营 Task4笔记——vllm加速方式修改及llm推理参数调整上分
【2024】Datawhale AI夏令营 Task4笔记——vllm加速方式修改及llm推理参数调整上分 本文承接文章【2024】Datawhale AI夏令营 Task3笔记——Baseline2部分代码解读及初步上分思路，对其中vllm加速方式进行修改，推理速度获得了极大提升。另外，…...
腾讯OCR签名算法
云服务器 签名方法 v3-调用方式-API 中心-腾讯云 一，签名算法-官网 copy官网 package com.smcv.customer.service.util;import org.springframework.http.HttpHeaders;import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import javax.xml.bind.D…...
CTFHUB-SSRF-DNS重绑定 Bypass
开启题目，页面空白，访问附件 附件是一个知乎的文章，翻到下面点击文中这个链接 跳转之后，进行设置 把得到的链接拼接到题目的后面进行访问，然后得到了本题的 flag...
【oracle】数据库基本使用
一、oracle数据库简介 Oracle 数据库，亦称 Oracle RDBMS，或简称 Oracle，是一款由甲骨文公司推出的高效、稳定且广泛应用的关系型数据库管理系统。该数据库系统不仅在数据管理领域处于领先地位，而且由于其良好的可移植性、易用性和…...
Action部署在线上写文章
原文：https://blog.c12th.cn/archives/32.html 前言 之前分别出了 Hexo 和 Hugo 的 Action搭建教程，相当于伪动态，可以在线上写文章了；不过对于喜欢魔改的同学就不太友好了qwq 教程 github.dev 确保在配置过程中能访问Github &…...
CC链 (Commons Collections)
目录 前置知识 CC链: https://mvnrepository.com/ CC链 CC链 Commons Collections --apache组织发布的开源库 里面主要对集合的增强以及扩展类 被广泛使用 组件,HashMap HashTable ArrayList总结CC链: 就是有反序列化入口，同时有cc库的情况下，…...
左手坐标系、右手坐标系、坐标轴方向
一、右手坐标系 1、y轴朝上：webgl、Threejs、Unity、Unreal、Maya、3D Builder x：向右y：向上z：向前（朝向观察者、指向屏幕外） 2、z轴朝上：cesium、blender x：向右y：向前…...
有没有必要为B2B网站做外链/百度竞价推广技巧
备考第6周总结这个星期最大的收获就是看了何凯文老师的长难句基础课，一共有8节，这个星期学了4节。我感觉他讲的非常好，思路非常清晰，讲课时也不会忘记和大家开开玩笑，课堂气氛很好。我听了以后，受益匪浅&am…...
专业网站建设技术/站长资讯
前言前面我们用了几篇文章系统的说了一下有关Java并发编程模型中的一些基础的知识。比如同步，锁，原子性操作，信号量等以及它们的一些延展实现闩锁，栅锁等等。今天我们回过头来简单说一下并发编程模型的设计和选择。主要涉及到我们…...
微网站页面/seo详细教程
工作环境(蓝色粗体字为特别注意内容) 1，系统环境：Win7 Ultimate sp1、Android Studio 3.2、gradle 4.6 这个错误很奇怪，明明交了钱，下载了SDK开发包，但是集成到项目中去使用离线功能就报错，但是在线语音转…...
网站建设开发维护/微商软文
最近在一个 Vue 的项目中重构功能时，遇到一个有趣的问题，场景是通过接口动态获取名称并显示在下拉列表中，第一次实现的代码如下：但这样写代码可扩展性很低，例如这时候需要添加一个查询用户身份的下拉框就要再写一个方法…...
wordpress 伪静态 tag/西安百度关键词排名服务
导读：1、什么是经验主义，管理中的经验主义2、保持开放心态，向年轻人学习3、学会逆向思维，发扬创新精神01什么是经验主义，管理中的经验主义“我走过的桥比你走过的路多，我吃的盐比你吃的米都多”，…...
主流网站编程语言/怎么搜索关键词
软件介绍MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手.功能特性：iPad版1.内嵌 Web inspector(类似于 Chrome DevTool 或 FireBug):有 Elements,Resources,Network,Timeline,Console 面板.2.远程打开Web inspector调试:在电脑(window,mac,linux,仅需装有…...