Nanbeige 4.1-3B实战教程：重置按钮RESET红色高亮CSS实现细节
Nanbeige 4.1-3B实战教程：重置按钮RESET红色高亮CSS实现细节
1. 项目背景与设计理念
Nanbeige 4.1-3B是一款具有独特像素游戏风格的AI对话前端界面。与传统聊天界面不同，它采用了JRPG(日式角色扮演游戏)的视觉设计语言，让用户与AI的交互过程充满游戏化的乐趣。
在这个设计中，重置按钮(RESET)被赋予了特殊的视觉重要性。它采用醒目的红色高亮设计，不仅是一个功能按钮，更是整个交互体验中的关键视觉元素。当用户需要清空对话上下文、开始新的"冒险"时，这个按钮提供了明确的行动召唤。
2. RESET按钮的设计目标
2.1 视觉优先级
在JRPG风格的界面中，重要操作按钮需要具备:
- 高对比度色彩
- 明显的视觉重量
- 符合游戏美学的设计细节
2.2 功能定位
RESET按钮承担着:
- 清空当前对话上下文
- 重置AI模型状态
- 为用户提供"重新开始"的明确入口
3. CSS实现细节
3.1 基础按钮样式
首先定义按钮的基础样式，确保它在各种状态下都保持一致的视觉效果:
.reset-btn { font-family: 'Press Start 2P', cursive; /* 像素风格字体 */ font-size: 14px; padding: 12px 24px; border: none; border-radius: 0; /* 去除圆角，保持像素风格 */ cursor: pointer; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; box-shadow: 4px 4px 0 #2C2C2C; /* 像素风格的阴影效果 */ }3.2 红色高亮效果
实现标志性的红色高亮效果:
.reset-btn { background-color: #FF3B30; /* 主红色 */ color: white; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); /* 文字阴影增强可读性 */ /* 发光效果 */ box-shadow: 0 0 8px rgba(255, 59, 48, 0.6), 4px 4px 0 #2C2C2C; } .reset-btn:hover { background-color: #FF5E54; /* 悬停时稍亮的红色 */ box-shadow: 0 0 12px rgba(255, 59, 48, 0.8), 4px 4px 0 #2C2C2C; } .reset-btn:active { transform: translate(2px, 2px); /* 点击时的像素风格反馈 */ box-shadow: 0 0 8px rgba(255, 59, 48, 0.6), 2px 2px 0 #2C2C2C; }3.3 像素边框细节
为保持整体像素风格，添加边框细节:
.reset-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); } .reset-btn::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3), transparent); }4. 动画与交互增强
4.1 悬停动画
添加微妙的动画效果增强交互体验:
.reset-btn { transition: all 0.1s ease; } .reset-btn:hover { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 8px rgba(255, 59, 48, 0.6), 4px 4px 0 #2C2C2C; } 50% { box-shadow: 0 0 16px rgba(255, 59, 48, 0.8), 4px 4px 0 #2C2C2C; } 100% { box-shadow: 0 0 8px rgba(255, 59, 48, 0.6), 4px 4px 0 #2C2C2C; } }4.2 点击反馈
点击时添加像素风格的反馈:
.reset-btn:active { animation: click 0.2s; } @keyframes click { 0% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px); } 100% { transform: translate(0, 0); } }5. 在Streamlit中的实现
5.1 集成到Streamlit界面
由于Nanbeige使用Streamlit作为前端框架，需要通过特殊方式注入CSS:
import streamlit as st # 在Streamlit中注入自定义CSS reset_button_css = """ <style> /* 这里放置前面所有的CSS代码 */ </style> """ st.markdown(reset_button_css, unsafe_allow_html=True) # 创建重置按钮 if st.button('RESET', key='reset_chat'): # 重置对话状态的逻辑 st.session_state.messages = []5.2 解决Streamlit的限制
Streamlit的默认按钮样式会覆盖自定义样式，需要强制覆盖:
/* 强制覆盖Streamlit默认样式 */ button[kind="primary"] { all: unset !important; } .stButton>button { all: unset !important; /* 重新应用我们的自定义样式 */ font-family: 'Press Start 2P', cursive !important; font-size: 14px !important; padding: 12px 24px !important; /* 其他样式属性... */ }6. 兼容性考虑
6.1 字体回退
确保在没有像素字体时的显示效果:
.reset-btn { font-family: 'Press Start 2P', 'Courier New', monospace; }6.2 移动端适配
调整移动设备上的显示效果:
@media (max-width: 768px) { .reset-btn { font-size: 12px; padding: 8px 16px; } }7. 总结
通过以上CSS实现，我们为Nanbeige 4.1-3B的RESET按钮创建了:
- 醒目且符合游戏美学的红色高亮效果
- 流畅的交互反馈动画
- 完美的像素风格细节
- 在Streamlit框架中的稳定表现
这种设计不仅提升了功能可见性，也强化了整个产品的游戏化体验，让AI对话变得更加生动有趣。
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。