想写出好看又不复杂的按钮，除了知道颜色、间距、圆角和反馈这些原则，更重要的是手里要有能直接落地的写法。下面从基础按钮模板开始，再拆分纯色按钮、描边按钮、圆角按钮代码、渐变按钮写法和按钮悬停效果，方便按场景直接套用。

按钮是页面里最常被点击的元素之一，实用比花哨更重要。一个容易落地的按钮样式，通常要先保证文字清晰、点击区域足够、主次关系明确，再通过悬停和按下状态增强反馈。最小可用方案可以先固定几组常用数值：padding可先用12px 20px到14px 24px，圆角可先用6px到999px，transition建议用all .2s ease，主按钮字号通常用14px到16px。先有稳定模板，再根据页面替换颜色、边框和阴影，开发效率会高很多。

• 基础结构推荐：立即提交，用一个基础类控制尺寸和过渡，再用样式类区分外观。
• 基础CSS模板可直接使用：.btn{display:inline-block;padding:12px 20px;font-size:14px;line-height:1;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .2s ease;}。
• 悬停状态建议优先做颜色变化和轻微上移，例如transform:translateY(-1px);，简单但足够明显。
• 按下状态建议回到原位或轻微下压，例如transform:translateY(0);，能快速做出点击反馈。

如果页面风格简洁，纯色按钮最容易适配；如果希望强调操作层级，可以使用描边按钮区分主次；如果页面偏活动页或展示页，渐变按钮能提升视觉吸引力。为了让按钮样式真正能直接使用，下面把常见写法拆成几个可以单独复制的小方案。

• 纯色按钮适合登录、提交、确认等主要操作，代码简单，兼容性也更好。
• 描边按钮适合取消、返回、查看更多等次级操作，不会抢走主按钮的视觉重点。
• 渐变按钮更适合活动页、专题页或需要强化视觉吸引力的区域，但颜色变化不宜过多。
• 轻阴影按钮适合卡片式布局，能让按钮从背景中更自然地凸显出来。
• 圆角胶囊按钮更适合移动端或内容社区页面，视觉会显得更轻松亲和。

如果你只是想先把按钮写出来，最省事的方式是先准备一套通用HTML和CSS模板，再切换不同样式类。基础HTML可以写成：主按钮 次按钮。基础CSS可统一写成：.btn{display:inline-block;min-width:120px;padding:12px 24px;font-size:14px;font-weight:500;line-height:1;border-radius:8px;border:1px solid transparent;background:none;cursor:pointer;transition:all .2s ease;} .btn:hover{transform:translateY(-1px);} .btn:active{transform:translateY(0);opacity:.95;}。这样先把尺寸、圆角、交互统一，后面只改颜色就能扩展出不同按钮。

• 后台页面可以把padding控制在10px 18px到12px 20px之间，视觉更紧凑。
• 内容页或移动端可以把padding放到12px 24px或14px 28px，点击区域更舒服。
• 圆角如果想更稳重，用6px到8px；如果想更柔和，用20px到999px做胶囊效果。
• transition保留在.2s到.3s之间更实用，时间过长会显得拖沓。

纯色按钮是最常见的CSS按钮样式，适合大多数主操作场景。示例代码：HTML：提交内容。CSS：.btn-solid{background:#2f6bff;color:#fff;box-shadow:0 8px 20px rgba(47,107,255,.22);} .btn-solid:hover{background:#2457d6;box-shadow:0 10px 24px rgba(47,107,255,.28);} .btn-solid:active{background:#1d49b8;}。如果想做圆角按钮代码，只要在这个基础上把border-radius调大，例如：.btn-round{background:#16a34a;color:#fff;border-radius:999px;padding:12px 26px;} .btn-round:hover{background:#12813b;} .btn-round:active{background:#0f6a31;}。纯色按钮重点在于对比度稳定，圆角按钮则更适合移动端、社区页和轻量风格页面。

• 纯色按钮适合提交、保存、立即购买这类需要明确强调的主操作。
• 圆角按钮代码不需要复杂结构，直接把border-radius改成999px就能形成胶囊效果。
• 主色建议控制在一组固定品牌色里，方便全站复用。
• 如果按钮文字偏长，优先增加左右padding，而不是单独拉高高度。

描边按钮适合做次级操作，视觉更轻，也能和主按钮形成清晰区分。示例代码：HTML：取消。CSS：.btn-outline{background:#fff;color:#2f6bff;border-color:#2f6bff;} .btn-outline:hover{background:#2f6bff;color:#fff;box-shadow:0 8px 18px rgba(47,107,255,.18);} .btn-outline:active{background:#2457d6;border-color:#2457d6;color:#fff;}。按钮悬停效果不一定要复杂，常见的简单写法就是颜色加深、背景反转、阴影增强和轻微上移。对于工具类页面，做到这一步已经足够实用。

• 描边按钮适合取消、返回、查看详情、了解更多等不需要最强强调的操作。
• 悬停效果如果只想保守一点，可以只改background和color，不必一定加阴影。
• 想提升层次感时，可在hover加box-shadow:0 8px 18px rgba(0,0,0,.12);。
• 按下态建议保留颜色变化，不建议加入大幅缩放，避免影响稳定感。

渐变按钮更适合活动页、专题页或需要一点视觉吸引力的位置，但配色不宜过多。示例代码：HTML：立即领取。CSS：.btn-gradient{color:#fff;background:linear-gradient(135deg,#ff7a18,#ff4d6d);box-shadow:0 10px 24px rgba(255,77,109,.24);} .btn-gradient:hover{background:linear-gradient(135deg,#ff8a36,#ff3358);box-shadow:0 12px 28px rgba(255,77,109,.32);} .btn-gradient:active{background:linear-gradient(135deg,#e86d12,#e64061);}。如果页面偏稳重，建议用同色系渐变；如果页面偏营销，可以让前后色相差稍大一点，但仍要保证文字清晰。

• 渐变按钮写法的关键不是颜色越多越好，而是两端颜色层次清楚且文字可读。
• 活动页适合橙红、蓝紫这类更显眼的渐变，但后台系统更适合纯色或轻渐变。
• 如果背景本身已经很花，按钮渐变要简化，避免页面重点分散。
• 渐变按钮同样保留hover和active状态，交互完整度会更高。

同一套按钮样式并不适合所有页面，真正实用的做法是保留结构，把颜色和尺寸做成可快速替换的部分。后台管理页面适合稳重、清晰的按钮；内容展示页适合更轻一点的视觉；移动端则要优先保证点击区域充足。你可以把.btn保留为通用基础类，再通过.btn-solid、.btn-outline、.btn-round、.btn-gradient这些修饰类快速切换风格，这样既统一维护，也方便后续扩展。

• 后台或工具类页面建议用低饱和主色和8px左右圆角，整体更稳。
• 营销或活动页面可以适当提高明度，并增加阴影或渐变，但不要同时叠太多动画。
• 移动端按钮高度建议至少保证在40px以上，减少误触。
• 同一页面内主按钮和次按钮的样式差异要明确，通常用纯色配描边最省心。

按钮样式不一定越复杂越好，真正耐用的方案往往是先有一套可直接复用的基础模板，再按场景切换纯色、描边、圆角和渐变这些常见写法。把基础态、悬停态、按下态一次补齐，后续无论是做圆角按钮代码还是渐变按钮写法，都会更快落地。

《夸克》非常好用的免费AI浏览器

下载APP查看