html+css 实现hover选择按钮
前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- 一、效果
- 二、原理解析
- 1.这是一个,==hover出现2个选择按钮==的效果。每个按钮都是由4部分组成,1个div,1个div的伪元素before,2个button,如下图。
- 1.1 div元素是==最外层==的,位置和代码。
- 1.2 div:before是白底黑字,也是默认的==文字==,位置和代码。
- 1.3 ==2个button==按钮的位置和代码。
- 1.4 按钮==组成==关系。
- 2.当按钮上有鼠标时,hover效果触发,最上层的div:before隐藏,运行==transition过渡动画==效果。
- 3.具体的变换参数,直接==看代码==,可以一键复制,查看效果
- 三、上代码,可以直接复制使用
- 目录
- html
- css
一、效果

二、原理解析
1.这是一个,hover出现2个选择按钮的效果。每个按钮都是由4部分组成,1个div,1个div的伪元素before,2个button,如下图。

1.1 div元素是最外层的,位置和代码。


1.2 div:before是白底黑字,也是默认的文字,位置和代码。


1.3 2个button按钮的位置和代码。



1.4 按钮组成关系。

2.当按钮上有鼠标时,hover效果触发,最上层的div:before隐藏,运行transition过渡动画效果。

/*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}
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"><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div></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;
}.butWrap {font-size: 1.2rem;cursor: pointer;position: relative;display: flex;align-items: center;transition: 1s;overflow: hidden;
}.butWrap::before {content: '求点赞';display: flex;justify-content: center;align-items: center;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 10;background: #fff;transition: 0.2s;border-radius: 3px;font-size: 16px;
}.butWrap:nth-child(2)::before {content: '求关注';
}.butWrap:nth-child(3)::before {content: '求收藏';
}.butWrap:nth-child(4)::before {content: '求转发';
}.butWrap > button {width: 50%;padding: 10px 15px;border: 0px;color: white;font-size: 1rem;font-weight: 700;cursor: pointer;outline: none;
}.butLeft {background: rgb(217, 20, 20);border-radius: 5px 0px 0px 5px;
}.butRight {background: rgb(29, 161, 242);border-radius: 0px 5px 5px 0px;
}.butWrap > button:hover {filter: brightness(400%);
}
/*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作
相关文章:
html+css 实现hover选择按钮
前言:哈喽,大家好,今天给大家分享htmlcss 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目…...
Python数据可视化利器:Matplotlib详解
目录 Matplotlib简介安装MatplotlibMatplotlib基本用法 简单绘图子图和布局图形定制 常见图表类型 折线图柱状图散点图直方图饼图 高级图表和功能 3D绘图热图极坐标图 交互和动画与其他库的集成 与Pandas集成与Seaborn集成 常见问题与解决方案总结 Matplotlib简介 Matplotli…...
2024 NVIDIA开发者社区夏令营环境配置指南(Win Mac)
2024 NVIDIA开发者社区夏令营环境配置指南(Win & Mac) 1 创建Python环境 首先需要安装Miniconda: 大家可以根据自己的网络情况从下面的地址下载: miniconda官网地址:https://docs.conda.io/en/latest/miniconda.html 清华大学镜像地…...
介绍rabbitMQ
RabbitMQ是一个开源的消息代理软件,实现了高级消息队列协议(AMQP),主要用于在不同的应用程序之间进行异步通信。以下是关于RabbitMQ的详细介绍: 一、基本概念 消息中间件:RabbitMQ是一个消息中间件&#x…...
AI在医学领域:使用眼底图像和基线屈光数据来定量预测近视
关键词:深度学习、近视预测、早期干预、屈光数据 儿童近视已经成为一个全球性的重大健康议题。其发病率持续攀升,且有可能演变成严重且不可逆转的状况,这不仅对家庭幸福构成威胁,还带来巨大的经济负担。当前的研究着重指出&#x…...
VB.NET中如何利用WPF(Windows Presentation Foundation)进行图形界面开发
在VB.NET中,利用Windows Presentation Foundation (WPF) 进行图形界面开发是一个强大的选择,因为它提供了丰富的UI元素、动画、数据绑定以及样式和模板等高级功能。以下是在VB.NET项目中使用WPF进行图形界面开发的基本步骤: 1. 创建一个新的…...
Go语言标准库中的双向链表的基本用法
什么是二分查找区间? 什么是链表? 链表节点的代码实现: 链表的遍历: 链表如何插入元素? go语言标准库的链表: 练习代码: package mainimport ("container/list""fm…...
手机游戏录屏软件哪个好,3款软件搞定游戏录屏
在智能手机普及的今天,越来越多的人喜欢在手机上玩游戏,并希望能够录制游戏过程或者分享游戏技巧。然而,面对市面上众多的手机游戏录屏软件,很多人可能会陷入选择困难。究竟手机游戏录屏软件哪个好?在这篇文章中&#…...
【力扣】4.寻找两个正序数组的中位数
题目描述 给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1: 输入:nums1 [1,3], nums2 [2] 输出:2.0…...
【C++】初识面向对象:类与对象详解
C语法相关知识点可以通过点击以下链接进行学习一起加油!命名空间缺省参数与函数重载C相关特性 本章将介绍C中一个重要的概念——类。通过类,我们可以类中定义成员变量和成员函数,实现模块化封装,从而构建更加抽象和复杂的工程。 &…...
知识图谱学习总结
1 知识图谱的介绍 知识图谱,是结构化的语义知识库,用于迅速描述物理世界中的概念及其相互关系,通过知识图谱能够将Web上的信息、数据以及链接关系聚集为知识,使信息资源更易于计算、理解以及评价,并能实现知识的快速响…...
2021-10-23 51单片机LED1-8按秒递增闪烁
缘由51单片机,八个LED灯按LED1亮1s灭1s,LED1亮2s 灭2s以此类推的方式亮灭-编程语言-CSDN问答 #include "REG52.h" sbit K1 P1^0; sbit K2 P1^1; sbit K3 P1^2; sbit K4 P1^3; sbit P1_0P2^0; sbit P1_1P2^1; sbit P1_2P2^2; sbit P1_3P2^3; sbit P1_…...
在Linux中宏观的看待线程
线程一旦被创建,几乎所有的资源都是被所有的线程共享的。线程也一定要有自己私有的资源,什么样的资源应该是线程私有的? 1.PCB属性私有 2.要有一定的私有上下文结构 3.每个线程都要有独立的栈结构 ps -aL ##1. Linux线程概念 ###什么是线程…...
提示libfakeroot.so或libfakeroot-sysv.so出错处理方法
在RK3588 Buildroot SDK里面,uboot和kernel使用的是prebuild目录下的交叉编译链,而buildroot和APP编译则使用Buildroot生成的交叉编译链来编译(如:位于buildroot/output/rockchip_rk3588/host目录为交叉编译工具链目录)…...
【计算机网络】什么是socket编程?以及相关接口详解
💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …...
LeetCode.19.删除链表的倒数第n个节点
题目描述: 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点 输入输出实例: 思路:这道题目我们可以用双指针来做,让first和second指针之间的距离为n1,然后我们first和second指针…...
vue-cesium
vue-cesium: Vue 3.x components for CesiumJS. cesium 文档中文版 ArcGisMapServerImageryProvider - Cesium Documentation all参考 https://juejin.cn/post/7258119652726341669 cesium官网 Cesium Sandcastle...
《npm 学习过程中遇到的诸多问题》
npm 开发 1.开发过程中难免会使用到npm ,进行安装第三方包 遇到的问题 match 报错:npm i报错npm ERR! Cannot read property match of undefined 可以尝试清除本地的package-log.json 文件,再试试...
CentOS 介绍
引出 Linux 系统内核与 Linux 发行套件系统的区别? Linux 系统内核指的是一个由 Linus Torvalds(Linux之父,内核主要开发者)负责维护,提供硬件抽象层、磁盘、文件系统控制及多任务功能的系统核心程序。 Linux 发行套…...
模拟面试题1
目录 一、JVM的内存结构? 二、类加载器分为哪几类? 三、讲一下双亲委派机制 为什么要有双亲委派机制? 那你知道有违反双亲委派的例子吗? 四、IO 有哪些类型? 五、Spring Boot启动机制 六、Spring Boot的可执行…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
boost::filesystem::path文件路径使用详解和示例
boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类,封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解,包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...
李沐--动手学深度学习--GRU
1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...
