本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库
返回配方目录
Pastel Goth

粉彩哥特组件配方

font-semibold rounded-lg border-2 transition-all duration-300 ease-in-out bg-[#2d1b3d] text-[#d4a5e3] border-[#d4a5e3]/50 shadow-md shadow-[#d4a5e3]/20 hover:shadow-lg hover:shadow-[#d4a5e3]/30 hover:scale-105 hover:brightness-110 active:scale-95
button

按钮

Dark gothic button with pastel accents, bold contrast, and moody atmosphere

基础骨架
font-semibold rounded-lg border-2 transition-all duration-300 ease-in-out
变体
主要、次要、粉彩
状态
hover、active、disabled
card

卡片

Dark moody card with pastel-goth accents and ethereal shadow effects

基础骨架
bg-[#1a1225] rounded-xl border border-[#d4a5e3]/20 shadow-lg shadow-[#2d1b3d]/50 transition-all duration-300 ease-in-out
变体
默认、薰衣草、青色
状态
hover
input

输入框

Dark input with pastel glow focus states and gothic styling

基础骨架
w-full rounded-lg border border-[#d4a5e3]/20 bg-[#1a1225] text-[#d4a5e3] placeholder:text-[#d4a5e3]/30 focus:outline-none transition-all duration-300 ease-in-out
变体
默认、青色
状态
focus、disabled