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

从零开始制作一个漂亮的悬浮按钮

article 2026/4/9 9:40:18

0.1血版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
/* 按钮的通用样式, 定义所有 button 元素的样式*/
/* 也可以添加class属性, 使用.class_btn
同样可以添加id属性, 使用#id_btn */
button {position: fixed;  /* 固定定位 */bottom: 10px; /* 距离窗口底部 10 像素 */right: 10px; /* 距离窗口右侧 10 像素 */background-color: #007bff; /* 背景颜色为蓝色 */padding: 15px 20px; /* 内边距，上下 15 像素，左右 20 像素 */z-index: 666; /* 设置较高的层级，确保按钮在最上层显示 */
}
</style>
<body><button id="id_btn" class="class_btn">按钮</button>
</body>
</html>

按钮效果：

使用 button 对所有按钮进行通用样式设置。

使用 position: fixed 固定按钮位置，无论页面如何滚动，带有 position: fixed 的元素都会固定在指定位置，不会随页面滚动而改变位置。
使用了 position: fixed 之后，可以使用以下几个常用的定位属性来指定元素在视口中的位置：
top：距离视口顶部的距离
bottom：距离视口底部的距离
left：距离视口左侧的距离
right：距离视口右侧的距离

使用 padding: 15px 20px; 调整按钮大小，而不是使用width和height。
拥有以下优势：
按钮尺寸根据文本内容加上周围的填充进行动态调整。
不必担心内容溢出。
由于按钮随着文本长度或翻译的不同而增长或收缩，它也往往更快，更容易访问。

残血版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
button {position: fixed;  /* 固定定位 */bottom: 10px; /* 距离窗口底部 10 像素 */right: 10px; /* 距离窗口右侧 10 像素 */background-color: #007bff; /* 背景颜色为蓝色 */padding: 15px 20px; /* 内边距，上下 15 像素，左右 20 像素 */z-index: 666; /* 设置较高的层级，确保按钮在最上层显示 */color: white; /* 文本颜色为白色 */font-weight: bold; /* 文本加粗 */font-size: 18px;  /* 字体大小 18 像素 */border-radius: 30px; /* 设置圆角半径为 30 像素 */border: none;  /* 去除边框 */
}
</style>
<body><button id="id_btn" class="class_btn">按钮</button>
</body>
</html>

按钮效果：

消除黑色边框只需简单的 border: none; /* 去除边框 */

鼠标悬停进阶版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
/* 按钮样式 */
button {position: fixed;  /* 固定定位 */bottom: 10px; /* 距离窗口底部 10 像素 */right: 10px; /* 距离窗口右侧 10 像素 */background-color: #007bff; /* 背景颜色为蓝色 */padding: 15px 20px; /* 内边距，上下 15 像素，左右 20 像素 */z-index: 666; /* 设置较高的层级，确保按钮在最上层显示 */color: white; /* 文本颜色为白色 */font-weight: bold; /* 文本加粗 */font-size: 18px;  /* 字体大小 18 像素 */border-radius: 30px; /* 设置圆角半径为 30 像素 */border: none;  /* 去除边框 */cursor: pointer;  /* 鼠标悬停时显示手形指针 */box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */transition: all 0.3s ease;  /* 所有属性变化添加 0.3s 平滑过渡 */
}/* 当鼠标悬停在 button 上时的样式 */
button:hover {  /* 定义悬停时的样式 */background-color: #0056b3;  /* 改变背景颜色为深蓝色 */box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);  /* 增加阴影效果，使按钮更突出 */transform: translateY(-5px);  /* 按钮向上移动 5 像素，产生浮动效果 */box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);  /* 加深阴影效果 */
}
</style>
<body><button id="id_btn" class="class_btn">按钮</button>
</body>
</html>

按钮效果

鼠标悬停效果

鼠标点击进阶版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
/* 按钮样式 */
button {position: fixed;  /* 固定定位 */bottom: 10px; /* 距离窗口底部 10 像素 */right: 10px; /* 距离窗口右侧 10 像素 */background-color: #007bff; /* 背景颜色为蓝色 */padding: 15px 20px; /* 内边距，上下 15 像素，左右 20 像素 */z-index: 666; /* 设置较高的层级，确保按钮在最上层显示 */color: white; /* 文本颜色为白色 */font-weight: bold; /* 文本加粗 */font-size: 18px;  /* 字体大小 18 像素 */border-radius: 30px; /* 设置圆角半径为 30 像素 */border: none;  /* 去除边框 */cursor: pointer;  /* 鼠标悬停时显示手形指针 */box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */transition: all 0.3s ease;  /* 所有属性变化添加 0.3s 平滑过渡 */
}/* 当鼠标悬停在 button 上时的样式 */
button:hover {  /* 定义悬停时的样式 */background-color: #0056b3;  /* 改变背景颜色为深蓝色 */box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);  /* 增加阴影效果，使按钮更突出 */transform: translateY(-5px);  /* 按钮向上移动 5 像素，产生浮动效果 */box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);  /* 加深阴影效果 */
}/* 当鼠标点击 button 时的样式 */
button:active {  /* 定义按钮被点击时的样式 */background-color: #00408a;  /* 改变背景颜色为更深蓝色 */box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);  /* 调整阴影效果，使按钮看起来按下 */transform: translateY(0);  /* 按钮恢复原位 */
}
</style>
<body><button id="id_btn" class="class_btn">按钮</button>
</body>
</html>

按钮效果

鼠标悬停效果

鼠标点击效果

从零开始制作一个漂亮的悬浮按钮

0.1血版 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &l…...

编程日记 2026/4/6 0:50:38

Win11更新系统c盘爆满处理

1.打开磁盘管理 2.右击c盘选择属性，进行磁盘管理，选择详细信息。 3.选择以前安装的文件删除即可释放c盘空间。...

编程日记 2026/4/5 11:27:45

element ui的time时间和table表格

<el-date-picker v-model"value1" align"right" type"date" placeholder"选择日期" value-format"yyyy-MM-dd" change"changeDate"></el-date-picker><el-date-picker v-model"datetime"…...

编程日记 2026/3/9 6:21:15

1. 编译工具安装 sudo apt update sudo apt install python3-catkin-pkg python3-rosdep python3-rosinstall-generator python3-wstool python3-rosinstall build-essential sudo rosdep init rosdep update2. 构建节点 mkdir -p ~/ros2_ws/src cd ~/ros2_ws ros2 pkg creat…...

编程日记 2026/4/5 2:23:58

《筑牢元宇宙根基：AI与区块链的安全信任密码》

在科技浪潮汹涌澎湃的当下，元宇宙已不再是科幻作品中的遥远构想，而是逐渐步入现实，成为人们热议与探索的前沿领域。从沉浸式的虚拟社交，到创新的数字经济模式，元宇宙的发展前景广阔，潜力无限。但要让元宇宙…...

编程日记 2026/3/13 20:33:17

深入探索 DeepSeek 在数据分析与可视化中的应用

在数据驱动的时代，快速且准确地分析和呈现数据对于企业和个人都至关重要。DeepSeek 作为一款先进的人工智能工具，凭借其强大的数据处理和可视化能力，正在革新数据分析的方式。 1. 数据预处理与清洗在进行数据分析前，数据预处理…...

编程日记 2026/2/19 17:29:55

【Nacos】从零开始启动Nacos服务（windows/linux)

文章目录前言前置条件官方网址一、Nacos下载1.1 选择Nacos版本1.2 下载二、解压2.1 解压到某个文件夹三、启动3.1 方式一：直接使用命令启动3.1.1 进入bin文件夹3.1.2 进入命令行工具3.1.3 执行命令 3.2 方式二：修改配置文件后启动3.2.1 修改启动脚本…...

编程日记 2026/4/4 15:43:38

即插即用Transformer、扩散模型、机器人规划、长文本检索增强生成 | Big Model Weekly 第57期...

点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入！ 01 ProTransformer: Robustify Transformers via Plug-and-Play Paradigm 近年来，基于Transformer的架构在机器学习的各个领域占据了主导地位。本文介绍了一种新颖的鲁棒性注意力机制，旨…...

编程日记 2026/4/4 16:26:34

FPGA DSP：Vivado 中带有 DDS 的 FIR 滤波器

本文使用 DDS 生成三个信号，并在 Vivado 中实现低通滤波器。低通滤波器将滤除相关信号。介绍用DDS生成三个信号，并在Vivado中实现低通滤波器。低通滤波器将滤除较快的信号。本文分为几个主要部分： 信号生成：展示如何使用DDS&am…...

编程日记 2026/4/7 14:09:27

DeepSeek各模型现有版本对比分析

文章目录一、基础模型系列：V1 到 V3 的演进二、专用模型系列：推理与多模态三、版本选型与商业化趋势 DeepSeek作为最近特别火爆的模型，本文将对DeepSeek现有的主要版本进行对比分析,涵盖参数规模、训练数据、功能改进、应用场景和性能表现等…...

编程日记 2026/4/7 6:54:18

ASP.NET Core Clean Architecture

文章目录项目地址一、项目主体1. CQRS1.1 Repository数据库接口1.2 GetEventDetail 完整的Query流程1.3 创建CreateEventCommand并使用validation 2. EFcore层2.1 BaseRepository2.2 CategoryRepository2.3 OrderRepository 3. Email/Excel导出3.1 Email1. Email接口层 4. 定义…...

编程日记 2026/4/7 4:49:19

紫光同创开发板使用教程(二)：sbit文件下载

sbit文件相当于zynq里面的bit文件，紫光的fpga工程编译完成后会自动生成sbit文件，因工程编译比较简单，这里不在讲解工程编译，所以我这里直接下载sbit文件。 1.工程编译完成后，可以看到Flow列表里面没有报错&#xff0c…...

编程日记 2026/4/8 15:07:55

【Python爬虫(58)】从0到1：Scrapy实战爬取大型新闻网站

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2026/3/31 23:09:22

1. 自定义组件基础

相关资源： 📎day10 图片素材.zip 1. 自定义组件基础概念：在ArkUI中由框架直接提供的称为系统组件 -> Column，Button等，由开发者定义的称为自定义组件作用：自定义组件可以对 UI和业务逻辑进行封装&…...

编程日记 2026/4/8 11:51:36

MySQL MHA 部署全攻略：从零搭建高可用数据库架构

文章目录 1.MHA介绍2.MHA组件介绍3.集群规划4.服务器初始化5.MySQL集群部署5.1 安装MySQL集群5.2 配置一主两从5.3 测试MySQL主从5.4 赋予MHA用户连接权限 6.安装MHA环境6.1 安装MHA Node6.2 安装MHA Manager 7.配置MHA环境8.MySQL MHA高可用集群测试8.1 通过VIP连接MySQL8.2模…...

编程日记 2026/4/7 17:06:11

Spring Boot3+Vue2极速整合：10分钟搭建DeepSeek AI对话系统

前言在生成式AI技术蓬勃发展的今天，大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表，DeepSeek凭借其卓越的中文语义理解能力和开发者友好的API生态，正在成为构建本土化AI应用的首选平台。本文将以S…...

编程日记 2026/4/7 17:17:40

浅谈 Redis 主从复制原理（二）

大家好，我是此林。【浅谈 Redis 主从集群原理（一） 】上一篇文章中，说到了 Redis 主从复制的全量同步和增量同步，repl_baklog 复制缓冲区，以及 slave 挂掉之后数据同步的措施。下面介绍的上一篇遗留问…...

编程日记 2026/4/8 10:26:04

elf_loader：一个使用Rust编写的ELF加载器

本文介绍一个使用Rust实现的ELF加载器。下面是elf_loader的仓库链接： github： https://github.com/weizhiao/elf_loaderhttps://github.com/weizhiao/elf_loader crates.io： https://crates.io/crates/elf_loaderhttps://crates.io/cra…...

编程日记 2026/4/7 16:43:53

连接Sql Server时报错无法通过使用安全套接字层加密与 SQL Server 建立安全连接

文章目录一. 前言二. 解决方案方案1方案2 三. 总结一. 前言在《数据库原理》这门课的实验上，需要使用SQL Server，然后使用jdbc连接sql server突然报错为：SQLServerException: “Encrypt”属性设置为“true”且 “trustServerCertific…...

编程日记 2026/4/7 8:58:33

Qt常用控件之日历QCalendarWidget

日历QCalendarWidget QCalendarWidget 是一个日历控件。 QCalendarWidget属性属性说明selectDate当前选中日期。minimumDate最小日期。maximumDate最大日期。firstDayOfWeek设置每周的第一天是周几（影响日历的第一列是周几）。gridVisible是否显示日历…...

编程日记 2026/4/9 4:35:36

Java——抽象类

在Java中，抽象类（Abstract Class） 是一种特殊的类，用于定义部分实现的类结构，同时允许子类提供具体的实现。抽象类通常用于定义通用的行为或属性，而将具体的实现细节留给子类。 1. 抽象类的定义语法&…...

编程日记 2026/2/11 7:20:18

Linux CentOS 上 Ollama 的安装与部署：从入门到实践

Linux CentOS 上 Ollama 的安装与部署：从入门到实践随着人工智能技术的快速发展，大语言模型（LLMs）的应用场景越来越广泛。Ollama 作为一个轻量级的 AI 模型管理工具，为开发者提供了便捷的模型部署和管理解决方案。本文将详细介绍如何在 Linux CentOS 系统上安装和部署 O…...

编程日记 2026/2/14 22:10:30

超级详细Spring AI运用Ollama大模型

大模型工具Ollama 官网:https://ollama.com/ Ollama是一个用于部署和运行各种开源大模型的工具; 它能够帮助用户快速在本地运行各种大模型，极大地简化了大模型在本地运行的过程。用户通过执行几条命令就能在本地运行开源大模型，如Lama 2等; 综上&#x…...

编程日记 2026/4/8 5:41:01

Django项目设计一个简单CRUD

在Django中实现一个学生类（Student）的CRUD（创建、读取、更新、删除）操作需要几个步骤，包括定义模型、创建视图、设置URL、以及配置模板。以下是一个基本的实现步骤： 1. 创建Django项目和应用首先&#x…...

编程日记 2026/3/28 8:19:12

0083.基于springboot+uni-app的社区车位租赁系统小程序+论文

一、系统说明基于springbootuni-app的社区车位租赁系统小程序,系统功能齐全, 代码简洁易懂，适合小白学编程。现如今，信息种类变得越来越多，信息的容量也变得越来越大，这就是信息时代的标志。近些年，计算机科学发展…...

编程日记 2026/4/8 6:04:30

计算机视觉行业洞察--影像行业系列第一期

计算机视觉行业产业链的上下游构成相对清晰，从基础技术研发到具体应用场景的多个环节相对成熟。以下是我结合VisionChina经历和行业龙头企业对计算机视觉行业产业链上下游的拆解总结。上下游总结上游产业链分为软硬件两类，视觉的硬件主要指芯片、…...

编程日记 2026/4/7 12:39:45

网页请求腾讯云环境的云函数

背景：uniapp，做一个管理后台需求：在PC端网页请求云环境的云函数 npm npm install cloudbase/js-sdk -S 在APP中，封装匿名登陆，因为未登录时无法请求云函数 app.vue <script>import Vue from vueimport cl…...

编程日记 2026/2/25 3:36:54

【深度学习量化交易15】基于miniQMT的量化交易回测系统已基本构建完成！AI炒股的框架初步实现

我是Mr.看海，我在尝试用信号处理的知识积累和思考方式做量化交易，应用深度学习和AI实现股票自动交易，目的是实现财务自由~ 目前我正在开发基于miniQMT的量化交易系统——看海量化交易系统。 AI怎么炒股？就是通过量化交易。近期D…...

编程日记 2026/4/9 1:26:02

使用大语言模型（Deepseek）构建一个基于 SQL 数据的问答系统

GitHub代码仓库架构从高层次来看，这些系统的步骤如下： 将问题转换为SQL查询：模型将用户输入转换为SQL查询。执行SQL查询：执行查询。回答问题：模型根据查询结果响应用户输入。样本数据下载样本数据&#xf…...

编程日记 2026/4/8 8:51:41

QT闲记-工具栏

工具栏通常用来放置常用的操作按钮，如QPushButton,QAction等。可以放置在顶部，底部，左侧，右侧，并且支持拖曳，浮动。 1、创建工具栏通常通过QMainWindow 提供的addToolBar()来创建，它跟菜单栏一样，如果需要工具栏，一般情况下，我们设置这个类的基类为QMainWindow。 …...

编程日记 2026/2/18 17:41:49

0.1血版

按钮效果：

残血版

按钮效果：

鼠标悬停进阶版

按钮效果

鼠标悬停效果

鼠标点击进阶版

按钮效果

鼠标悬停效果

鼠标点击效果

相关文章：