HTML+CSS 彩色浮雕按钮
效果演示
实现了一个彩色按钮特效，包括一个按钮（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）。按钮具有四种不同的颜色，当鼠标悬停在按钮上时，前景色会出现渐变效果，并且按钮的颜色、文本阴影和边…...
ChatBI开源实现: 基于SuperSonic的AI+BI的产品设计
产品起源 为什么要做这样的产品？文章《ChatBI开源实现: AIBI的产品设计》中有介绍 为什么要自己做这样的产品？1、低成本试错；2、未来数据生态入口； 为什么要基于Supersonic做？ 开源协议友好：可魔改商用 社区…...
【嵌入式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. 完整代码 本文…...
线性代数、矩阵计算
一、线性代数 1、对于向量，若a是标量，为a的绝对值乘以b的向量长度。 2、点乘 3、范数：向量或者矩阵的长度 L1范数：（对向量）每个元素的绝对值求和 L2范数：（对向量）torch.…...
PostgreSQL 高级功能（五）
1. 存储过程与函数 1.1 创建存储过程 存储过程是一组预编译的SQL语句，可以简化复杂的操作。以下是一个简单的存储过程示例： CREATE OR REPLACE FUNCTION add_user(username VARCHAR, email VARCHAR) RETURNS VOID AS $$ BEGININSERT INTO users (use…...
食品企业仓储式批发零售一体化解决方案
食品企业需要有效应对日益复杂的市场挑战和消费者需求的快速变化的挑战并提升市场竞争力，仓储式类的批发零售一体化需求应运而生。这一全新的商业模式不仅整合了传统的批发和零售模式，还优化了供应链管理和客户体验，成为食品行业发展的新引擎…...
chrome插件，修改对应URL的http请求的header头，包括ajax请求
要创建一个可以灵活修改HTTP请求头的Chrome扩展，包括一个用户界面来动态设置头部名称和值，可以按照以下步骤进行。我们会用到 chrome.storage API 来保存用户的设置，并在后台脚本中使用这些设置来修改请求头。 文件结构 my_chrome_extensio…...
C语言 | Leetcode C语言题解之第191题位1的个数
题目： 题解： int hammingWeight(uint32_t n) {int ret 0;while (n) {n & n - 1;ret;}return ret; }...
【C++11(二)】lambda表达式和可变参数模板
一、可变参数模板 C11的新特性可变参数模板 能够让您创建可以接受 可变参数的函数模板和类模板 // Args是一个模板参数包，args是一个函数形参参数包 // 声明一个参数包Args...args，这个参数包中可以包含0到任意个模板参数。 template <class ...Arg…...
昇思25天学习打卡营第2天|张量Tensor
张量Tensor 创建张量张量的属性张量索引张量运算 稀疏张量 总结 简单讲讲张量，数学和物理学界以一种方式定义张量，机器学习上则是以另一种方式定义张量，这里的张量也与神经网络联系紧密，神经网络需要进行大量的数学计算࿰…...
[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…...
java SQL server 多实例的情况
而对于java，对付多个数据库实例就有些要注意的了： 首先，同样连接字符串上加上“\实例名”： jdbc:sqlserver://127.0.0.1\\mssqlserver2008;DatabaseNameLPT; 此处应去掉端口1433。因为连接数据库自命名实例的url中没有端口号1433…...
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 错误页面不存在&…...
[word] Word如何删除所有的空行？ #职场发展#学习方法
Word如何删除所有的空行？ 很多网友从网页复制文字粘贴到word文档后发现段落之间有空行，如果文字不多，手动删除这些空行也没有多少工作量，但是如果文字的字数达到成千上万，一个个手动删除这些空行还是很繁琐的。那么&a…...
` 函数)
【CSS】深入探讨 CSS 的 `calc()` 函数
深入探讨 CSS 的 calc() 函数 calc() 是一个 CSS 函数，用于在样式表中进行数学计算，从而动态地设置 CSS 属性值。它允许开发者在指定长度、百分比、数值等时，进行加减乘除运算。通过 calc() 函数，我们可以实现更灵活和响应式的设…...
MongoDB异地备份数据文件脚本（带日志打印，便于排查）
此脚本是以文件夹的形式备份，非压缩包形式 如需备份成加密压缩包，可用此脚本：MongoDB定时异地备份所有数据库为加密压缩包-CSDN博客 1.可以直接下载本文件使用，将其放到mongo安装目录的bin目录下（可手动执行…...
论文导读 | Manufacturing Service Operations Management近期文章精选
编者按 在本系列文章中，我们梳理了顶刊Manufacturing & Service Operations Management5月份发布有关OR/OM以及相关应用的文章之基本信息，旨在帮助读者快速洞察行业/学界最新动态。 推荐文章1 ● 题目：Robust Drone Delivery with Weath…...
【Linux命令】top linux下的任务管理器
一、概述 top命令是Linux下常用的性能分析工具，能够实时显示系统中各个进程的资源占用状况，类似于Windows的任务管理器。top是一个动态显示过程，即可以通过用户按键来不断刷新当前状态。如果在前台执行该命令，它将独占前台&#…...
2024年在分数限制下，选好专业还是选好学校？
分数限制下，选好专业还是选好学校？ 24年高考帷幕落下，一场新的思考与选择悄然来临。对于每一位高考考生，学校和专业都是开启大学新生活的两个前置必选项。但有时候“鱼与熊掌不可兼得”，在分数受限的条件下࿰…...
cropperjs 裁剪/框选图片
1.效果 2.使用组件 <!-- 父级 --><Cropper ref"cropperRef" :imgUrl"url" searchImg"searchImg"></Cropper>3.封装组件 <template><el-dialog :title"title" :visible.sync"dialogVisible" wi…...
5分钟快速掌握Windows右键菜单终极管理神器ContextMenuManager
5分钟快速掌握Windows右键菜单终极管理神器ContextMenuManager 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是不是经常在右键文件时，面对几十个…...
解锁GitHub极速体验：智能加速插件深度解析
解锁GitHub极速体验：智能加速插件深度解析 【免费下载链接】Fast-GitHub 国内Github下载很慢，用上了这个插件后，下载速度嗖嗖嗖的~！ 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub GitHub加速插件（…...
使用mcp-maker快速构建AI工具调用服务器：从协议原理到工程实践
1. 项目概述与核心价值最近在折腾AI应用开发，特别是想给大语言模型（LLM）装上更强大的“手脚”，让它能直接操作我电脑上的各种软件和工具。这听起来很酷，对吧？但实际操作起来，你会发现一个核心痛…...
立体孪生全域可视，实现仓储人货动线全周期透明管控
立体孪生全域可视，实现仓储人货动线全周期透明管控副标题：动态三维实时还原库区人员、物资、车辆立体态势，运用库区无感定位、跨货架跨镜长距跟踪、身体指纹在岗确权，出入库、巡检、值守、调度全程透明可追溯一、方案总览现代规模…...
火灾动力学模拟实战：如何用FDS构建精准的火灾预测系统
火灾动力学模拟实战：如何用FDS构建精准的火灾预测系统 【免费下载链接】fds Fire Dynamics Simulator 项目地址: https://gitcode.com/gh_mirrors/fd/fds 你是否曾面临这样的困境：当设计一栋大型商业建筑时，如何科学评估火灾时的人员疏…...
用户指引自助教学源码—东方仙盟)
未来之窗昭和仙君(九十四)用户指引自助教学源码—东方仙盟
软件教学引导功能说明书未来之窗昭和仙君 - cyberwin_fairyalliance_webquery一、功能概述软件教学引导功能主要用于为用户提供软件操作的引导，通过一系列步骤逐步引导用户完成软件的重要操作。该功能会创建遮罩层、高亮框和提示框，引导用户点击特定元素…...
Docker容器MCP服务镜像：AI安全运维与自动化实践
1. 项目概述：一个为Docker容器提供MCP服务的镜像最近在折腾一些自动化工作流，发现很多工具都开始支持一种叫做MCP（Model Context Protocol）的协议。简单来说，MCP就像是一个标准化的“插座”，让各种AI模型&a…...
【限时解密】ElevenLabs未文档化的/v1/text-to-speech/{voice_id}/with-timing接口：获取逐词时间戳+音素级对齐数据（仅剩3个Beta白名单通道）
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs英文语音生成的核心能力与技术定位 ElevenLabs 是当前业界领先的 AI 语音合成平台，其英文语音生成能力建立在自研的端到端神经声学模型（如 ElevenMultilingualV2&…...
【Clickhouse从入门到精通】第08篇：揭秘ClickHouse为何如此之快——五大设计哲学
上一篇【第07篇】ClickHouse执行引擎架构——Parser、Interpreter与Function体系 下一篇【第09篇】ClickHouse安装部署全攻略——从环境准备到服务启动 摘要 ClickHouse能在十亿行级别数据的聚合查询中实现毫秒级响应，绝非偶然。这种极致性能的背后，是一…...
基于CircuitPython与AMG8833的嵌入式热成像系统：从8x8数据到15x15伪彩色显示的完整实现
1. 项目概述：从传感器到屏幕的嵌入式热成像之旅在嵌入式开发领域，将原始传感器数据转化为直观、可交互的视觉信息，是连接物理世界与数字世界的核心桥梁。这不仅仅是简单的数据读取与显示，更是一个涉及信号处理、算法优化和实时渲染…...