按钮
Soft pill-shaped button with pink tones, colored glow shadow, and scale hover
- 基础骨架
font-sans font-medium rounded-full transition-all duration-300 ease-in-out- 变体
- 樱花、薰衣草、金色、玫瑰、轮廓
- 状态
- hover、active、disabled
少女漫画风组件配方
font-sans font-medium rounded-full transition-all duration-300 ease-in-out bg-[#ffb7c5] text-white shadow-[0_4px_15px_#ffb7c560] hover:scale-105 hover:shadow-[0_6px_20px_#ffb7c580] active:scale-95卡片
Soft manga panel card with screentone background, flower corner icons, and pink-tinted shadow
- 基础骨架
bg-[#fff5f7] rounded-2xl border-2 border-[#ffb7c5]/20 shadow-[0_4px_20px_#ffb7c520] transition-all duration-300 ease-in-out relative overflow-hidden- 变体
- 默认、薰衣草、金色、漫画面板
- 状态
- hover
输入框
Soft pill-shaped input with pink focus glow on pearl background
- 基础骨架
w-full rounded-full border border-[#ffb7c5]/25 bg-[#fff5f7] text-[#4a5568] placeholder:text-[#ffb7c5]/40 font-sans focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、薰衣草、白色
- 状态
- focus、disabled
樱花徽章
Circular badge with soft pink gradient and petal-like border
- 基础骨架
inline-flex items-center justify-center [clip-path:polygon(50%_0%,65%_35%,100%_40%,75%_65%,80%_100%,50%_80%,20%_100%,25%_65%,0%_40%,35%_35%)] font-sans font-medium transition-all duration-300 ease-in-out- 变体
- 粉色、薰衣草、金色
- 状态
- hover
闪光面板
Panel with sparkle/glitter border decoration
- 基础骨架
bg-[#fff5f7] rounded-2xl border-2 border-[#ffb7c5]/25 shadow-[0_0_20px_#ffb7c515,0_0_40px_#c4b5fd10] bg-[radial-gradient(circle_2px_at_20%_30%,rgba(255,182,193,0.4)_0%,transparent_100%),radial-gradient(circle_1.5px_at_70%_20%,rgba(255,182,193,0.3)_0%,transparent_100%),radial-gradient(circle_2px_at_50%_70%,rgba(255,182,193,0.35)_0%,transparent_100%)] transition-all duration-300 ease-in-out relative- 变体
- 默认、浪漫、梦幻
- 状态
- hover
丝带横幅
Decorative ribbon-shaped banner
- 基础骨架
inline-flex items-center justify-center font-sans font-semibold px-6 py-2 rounded-none [clip-path:polygon(8px_0%,calc(100%-8px)_0%,100%_50%,calc(100%-8px)_100%,8px_100%,0%_50%)] relative transition-all duration-300 ease-in-out- 变体
- 粉色、薰衣草、金色
- 状态
- hover
心形进度条
Progress bar with heart-shaped fill aesthetic
- 基础骨架
w-full h-4 rounded-full bg-[#fff5f7] border border-[#ffb7c5]/20 overflow-hidden relative bg-[repeating-linear-gradient(90deg,transparent_0px,transparent_8px,rgba(255,182,193,0.2)_8px,rgba(255,182,193,0.2)_10px)] transition-all duration-300 ease-in-out- 变体
- 爱情、友情、魔法
- 状态
- 静态
花卉边框
Decorative frame with flowing floral border
- 基础骨架
bg-white/60 rounded-3xl border-2 border-double border-[#ffb7c5]/25 shadow-[0_4px_20px_#ffb7c515,inset_0_0_0_4px_rgba(255,182,193,0.15)] bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,183,197,0.06)_8px,rgba(255,183,197,0.06)_10px)] transition-all duration-300 ease-in-out relative- 变体
- 默认、樱花、玫瑰
- 状态
- hover