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

HTML+CSS 彩色浮雕按钮

news 2026/4/1 23:03:07

效果演示

25-彩色浮雕按钮.gif

实现了一个彩色按钮特效，包括一个按钮（button）和一个前景色（::before）。按钮具有四种不同的颜色，当鼠标悬停在按钮上时，前景色会出现渐变效果，并且按钮的颜色、文本阴影和边框阴影会发生变化。整个按钮具有立体感，使其看起来更加美观。

Code

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩色浮雕按钮</title><link rel="stylesheet" href="./25-彩色浮雕按钮.css">
</head><body><button>求点赞</button><button>求关注</button><button>求收藏</button><button>求转发</button>
</body></html>

CSS

* {margin: 0;padding: 0;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: #e8e8e8;
}button {margin: 10px;width: 280px;height: 90px;font-size: 35px;font-weight: bold;background: transparent;border: 1px solid transparent;cursor: pointer; position: relative;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px #808080;color: #333;text-shadow: 1px 1px 0 #808080;overflow: hidden;transition: 0.3s linear 0.15s;
}button:nth-child(1) {--c: #ff4757;
}button:nth-child(2) {--c: #ffa502;
}button:nth-child(3) {--c: #2ed573;
}button:nth-child(4) {--c: #1e90ff;
}button::before {content: "";position: absolute;width: 100px;height: 8px;top: 0;left: 50%;transform: translateX(-50%);border-radius: 0 0 50% 50%;filter: blur(5px);transition: 0.3s;
}button:hover::before {background: var(--c);box-shadow: 0 0 10px var(--c),0 0 20px var(--c),0 0 30px var(--c),0 0 40px var(--c),0 0 50px var(--c);
}button:hover {color: #fff;text-shadow: 0 0 10px var(--c),0 5px 5px #000;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px var(--c);
}

实现思路拆分

好的，下面是每行代码的详细讲解及注释：

* {margin: 0;padding: 0;
}

这段代码是设置所有元素的外边距和内边距为0。

body {height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: #333;
}

这段代码是设置body元素的高度为100vh，使用flex布局，使其水平和垂直居中。同时设置flex-direction为column，使其内部元素垂直排列。并且设置背景颜色为#333。

button {margin: 10px;width: 280px;height: 90px;font-size: 35px;font-weight: bold;background: transparent;border: 1px solid transparent;position: relative;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px #808080;color: #333;text-shadow: 1px 1px 0 #808080;overflow: hidden;transition: 0.3s linear 0.15s;
}

这段代码是设置按钮的样式。包括外边距、宽度、高度、字体大小、字体粗细、背景、边框、相对定位、内部阴影效果、字体颜色和文本阴影效果。并且设置过渡效果。

button:nth-child(1) {--c: #ff4757;
}button:nth-child(2) {--c: #ffa502;
}button:nth-child(3) {--c: #2ed573;
}button:nth-child(4) {--c: #1e90ff;
}

这段代码是为每个按钮设置不同的颜色。使用CSS变量（–c）来存储颜色值。

button::before {content: "";position: absolute;width: 100px;height: 8px;top: 0;left: 50%;transform: translateX(-50%);border-radius: 0 0 50% 50%;filter: blur(5px);transition: 0.3s;
}

这段代码是设置前景色的样式。使用伪元素::before，设置宽度、高度、相对定位、顶部和左侧偏移、圆角和模糊效果。并且设置过渡效果。

button:hover::before {background: var(--c);box-shadow: 0 0 10px var(--c),0 0 20px var(--c),0 0 30px var(--c),0 0 40px var(--c),0 0 50px var(--c);
}

这段代码是设置当鼠标悬停在按钮上时，前景色的渐变效果。使用:hover伪类，设置背景颜色和阴影效果。

button:hover {color: #fff;text-shadow: 0 0 10px var(--c),0 5px 5px #000;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px var(--c);
}

这段代码是设置当鼠标悬停在按钮上时，按钮的颜色、文本阴影和边框阴影的变化。使用:hover伪类，设置字体颜色、文本阴影效果和内部阴影效果。

HTML+CSS 彩色浮雕按钮

效果演示实现了一个彩色按钮特效，包括一个按钮（button）和一个前景色（::before）。按钮具有四种不同的颜色，当鼠标悬停在按钮上时，前景色会出现渐变效果，并且按钮的颜色、文本阴影和边…...

编程日记 2024/6/26 8:19:20

ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计

产品起源为什么要做这样的产品？文章《ChatBI开源实现: AIBI的产品设计》中有介绍为什么要自己做这样的产品？1、低成本试错；2、未来数据生态入口； 为什么要基于Supersonic做？ 开源协议友好：可魔改商用社区…...

编程日记 2024/6/26 8:13:13

【嵌入式Linux】i.MX6ULL 外部中断服务函数的初始化

文章目录 1. Cortex-A7 中断系统1.1 分析1.2 具体处理流程 2. 外部中断服务函数的初始化2.1 基本流程分析2.2 具体代码分析2.2.1. 定义中断处理类型和结构体2.2.2. 初始化中断系统2.2.3. 注册中断处理函数2.2.4. 具体的中断处理逻辑2.2.5. 默认的中断处理函数 3. 完整代码本文…...

编程日记 2024/6/26 8:10:10

线性代数、矩阵计算

一、线性代数 1、对于向量，若a是标量，为a的绝对值乘以b的向量长度。 2、点乘 3、范数：向量或者矩阵的长度 L1范数：（对向量）每个元素的绝对值求和 L2范数：（对向量）torch.…...

编程日记 2024/6/26 8:09:08

PostgreSQL 高级功能（五）

1. 存储过程与函数 1.1 创建存储过程存储过程是一组预编译的SQL语句，可以简化复杂的操作。以下是一个简单的存储过程示例： CREATE OR REPLACE FUNCTION add_user(username VARCHAR, email VARCHAR) RETURNS VOID AS $$ BEGININSERT INTO users (use…...

编程日记 2024/6/26 8:04:02

食品企业仓储式批发零售一体化解决方案

食品企业需要有效应对日益复杂的市场挑战和消费者需求的快速变化的挑战并提升市场竞争力，仓储式类的批发零售一体化需求应运而生。这一全新的商业模式不仅整合了传统的批发和零售模式，还优化了供应链管理和客户体验，成为食品行业发展的新引擎…...

编程日记 2024/6/26 8:03:00

chrome插件，修改对应URL的http请求的header头，包括ajax请求

要创建一个可以灵活修改HTTP请求头的Chrome扩展，包括一个用户界面来动态设置头部名称和值，可以按照以下步骤进行。我们会用到 chrome.storage API 来保存用户的设置，并在后台脚本中使用这些设置来修改请求头。文件结构 my_chrome_extensio…...

编程日记 2024/6/26 8:01:59

C语言 | Leetcode C语言题解之第191题位1的个数

题目： 题解： int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret; }...

编程日记 2024/6/26 8:00:57

【C++11(二)】lambda表达式和可变参数模板

一、可变参数模板 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板 // Args是一个模板参数包，args是一个函数形参参数包 // 声明一个参数包Args...args，这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…...

编程日记 2024/6/26 7:58:55

昇思25天学习打卡营第2天|张量Tensor

张量Tensor 创建张量张量的属性张量索引张量运算稀疏张量总结简单讲讲张量，数学和物理学界以一种方式定义张量，机器学习上则是以另一种方式定义张量，这里的张量也与神经网络联系紧密，神经网络需要进行大量的数学计算&#xff0…...

编程日记 2024/6/26 7:57:54

[leetcode]valid-triangle-number. 有效三角形的个数

. - 力扣（LeetCode） class Solution { public:int triangleNumber(vector<int>& nums) {int n nums.size();sort(nums.begin(), nums.end());int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int left j 1, righ…...

编程日记 2024/6/26 7:56:52

java SQL server 多实例的情况

而对于java，对付多个数据库实例就有些要注意的了： 首先，同样连接字符串上加上“\实例名”： jdbc:sqlserver://127.0.0.1\\mssqlserver2008;DatabaseNameLPT; 此处应去掉端口1433。因为连接数据库自命名实例的url中没有端口号1433…...

编程日记 2024/6/26 7:54:51

html--404页面

<!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <title>404 错误页面不存在&…...

编程日记 2024/6/26 7:52:48

[word] Word如何删除所有的空行？ #职场发展#学习方法

Word如何删除所有的空行？ 很多网友从网页复制文字粘贴到word文档后发现段落之间有空行，如果文字不多，手动删除这些空行也没有多少工作量，但是如果文字的字数达到成千上万，一个个手动删除这些空行还是很繁琐的。那么&a…...

编程日记 2024/6/26 7:50:46

【CSS】深入探讨 CSS 的 `calc()` 函数

深入探讨 CSS 的 calc() 函数 calc() 是一个 CSS 函数，用于在样式表中进行数学计算，从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时，进行加减乘除运算。通过 calc() 函数，我们可以实现更灵活和响应式的设…...

编程日记 2024/6/26 7:49:45

MongoDB异地备份数据文件脚本（带日志打印，便于排查）

此脚本是以文件夹的形式备份，非压缩包形式如需备份成加密压缩包，可用此脚本：MongoDB定时异地备份所有数据库为加密压缩包-CSDN博客 1.可以直接下载本文件使用，将其放到mongo安装目录的bin目录下（可手动执行&#xf…...

编程日记 2024/6/26 7:48:43

论文导读 | Manufacturing Service Operations Management近期文章精选

编者按在本系列文章中，我们梳理了顶刊Manufacturing & Service Operations Management5月份发布有关OR/OM以及相关应用的文章之基本信息，旨在帮助读者快速洞察行业/学界最新动态。推荐文章1 ● 题目：Robust Drone Delivery with Weath…...

编程日记 2024/6/26 7:46:40

【Linux命令】top linux下的任务管理器

一、概述 top命令是Linux下常用的性能分析工具，能够实时显示系统中各个进程的资源占用状况，类似于Windows的任务管理器。top是一个动态显示过程，即可以通过用户按键来不断刷新当前状态。如果在前台执行该命令，它将独占前台&#…...

编程日记 2024/6/26 7:45:39

2024年在分数限制下，选好专业还是选好学校？

分数限制下，选好专业还是选好学校？ 24年高考帷幕落下，一场新的思考与选择悄然来临。对于每一位高考考生，学校和专业都是开启大学新生活的两个前置必选项。但有时候“鱼与熊掌不可兼得”，在分数受限的条件下&#xff0…...

编程日记 2024/6/26 7:44:37

cropperjs 裁剪/框选图片

1.效果 2.使用组件 <Cropper ref"cropperRef" :imgUrl"url" searchImg"searchImg"></Cropper>3.封装组件 <template><el-dialog :title"title" :visible.sync"dialogVisible" wi…...

编程日记 2024/6/26 7:43:36

解决Python ssl模块与系统OpenSSL版本不一致的编译指南

1. 为什么Python的ssl模块会与系统OpenSSL版本不一致？ 很多开发者都遇到过这样的困惑：明明系统已经升级了OpenSSL，为什么Python的ssl模块还在使用旧版本？这个问题其实源于Python的编译机制。Python在编译安装时，会将当…...

编程新知 2026/4/1 22:25:21

AnythingtoRealCharacters2511镜像免配置部署教程：Docker+ComfyUI开箱即用方案

AnythingtoRealCharacters2511镜像免配置部署教程：DockerComfyUI开箱即用方案想快速将动漫人物变成真实照片？这个教程教你10分钟搞定专业级动漫转真人效果，无需任何技术背景！ 1. 为什么选择这个镜像？ 如果你曾经尝试…...

编程新知 2026/4/1 22:09:10

Ostrakon-VL 模型推理加速实战：使用 .accelerate 库优化扫描速度

Ostrakon-VL 模型推理加速实战：使用 .accelerate 库优化扫描速度 1. 效果惊艳的开场最近在测试Ostrakon-VL模型时，我发现了一个令人惊喜的事实：通过.accelerate库的几项简单优化，模型推理速度可以提升3倍以上，同时显…...

编程新知 2026/4/1 21:54:52

当今互联网安全的基石 - TLS/SSL

LS（Transport Layer Security）传输层安全协议发展历程 TLS 是 SSL 协议的继任者。由于 SSL 协议存在一些安全漏洞，并且随着网络安全需求的不断提高，IETF（Internet Engineering Task Force）对 SSL 3.0 进…...

编程新知 2026/4/1 20:40:02

Pixel Dream Workshop 快速上手：Python 零基础入门到生成第一幅AI画作

Pixel Dream Workshop 快速上手：Python 零基础入门到生成第一幅AI画作 1. 前言：为什么选择Pixel Dream Workshop 如果你对AI绘画感兴趣但苦于没有编程基础，这篇教程就是为你量身定制的。Pixel Dream Workshop是一个对新手极其友好的AI绘画工…...

编程新知 2026/4/1 20:05:37

Qwen3-VL-30B部署避坑指南：从下载到运行一气呵成

Qwen3-VL-30B部署避坑指南：从下载到运行一气呵成 1. 为什么选择Qwen3-VL-30B Qwen3-VL-30B是目前通义千问系列中最强大的视觉-语言模型，它在多个方面实现了显著提升： 更优秀的文本理解和生成：能够处理复杂语义和长文本更深入的…...

编程新知 2026/4/1 20:03:36

升级版会议纪要录音转文字工具识别准转得快整理省事体验好

前前后后踩过不下10款录音转写工具的坑，要么错字多到要逐行改，要么转出来的内容逻辑混乱，得花好几个小时捋顺，直到用到2026升级版的会议纪要录音转文字工具，才真的感受到什么叫识别准、转得快、整理省事体验好。今早开…...

编程新知 2026/4/1 18:19:01

PakePlus云打包入门指南：从零到一的GitHub Token配置与安全实践

PakePlus云打包入门指南：从零到一的GitHub Token配置与安全实践【免费下载链接】PakePlus Turn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)…...

编程新知 2026/4/1 17:47:28

手把手教你从Docker中提取Milvus二进制文件并配置集群环境

深度解析：从Docker镜像提取Milvus二进制文件的完整实践指南在向量数据库领域，Milvus凭借其出色的性能和可扩展性已经成为众多AI应用的首选基础设施。虽然官方推荐使用Docker进行部署，但在生产环境中，直接使用二进制文件部署往往…...

编程新知 2026/4/1 17:03:39

系统托盘管理效率革命：让你的Windows桌面空间重获自由

系统托盘管理效率革命：让你的Windows桌面空间重获自由【免费下载链接】rbtray A fork of RBTray from http://sourceforge.net/p/rbtray/code/. 项目地址: https://gitcode.com/gh_mirrors/rb/rbtray 当你的任务栏堆叠着12个窗口图标，每点击一次…...

编程新知 2026/4/1 16:22:42

效果演示

Code

HTML

CSS

实现思路拆分

相关文章：