如何为项目中多个/部分按钮批量应用相同格式？

嘿，这个需求太常见了！完全不用手动重复操作，核心思路就是复用+统一管理，根据你的项目技术栈，给你推荐几种最优方案：

1. 纯HTML/CSS项目：用CSS类统一管理 #

这是最基础也最实用的方法——把通用按钮样式抽成一个基础类，特殊样式用额外类叠加：

/* 通用按钮基础样式 */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

/* 主按钮变体 */
.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0056b3;
}

/* 次要按钮变体 */
.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

然后HTML里直接引用类：

<button class="btn btn-primary">确认提交</button>
<button class="btn btn-secondary">取消操作</button>

以后要改所有按钮的圆角、内边距，只需要修改.btn类；要改主按钮颜色，只改.btn-primary就行，所有用到这些类的按钮会同步更新。

2. 框架项目（Vue/React/Angular）：封装可复用组件 #

如果用前端框架，封装按钮组件是最优解——不仅能统一样式，还能统一处理交互逻辑（比如加载状态、点击防抖）：
举个React的例子：

import React from 'react';
import './Button.css';

const Button = ({ 
  variant = 'primary', 
  isLoading = false, 
  onClick, 
  children 
}) => {
  // 加载状态下禁用按钮
  if (isLoading) {
    return (
      <button className={`btn btn-${variant}`} disabled>
        加载中...
      </button>
    );
  }

  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

使用时直接调用组件：

<Button variant="secondary" onClick={handleCancel}>取消</Button>
<Button isLoading={isSubmitting}>提交表单</Button>

后续要修改样式或添加新功能（比如加图标），只需要更新这个组件，所有引用的地方自动生效，彻底避免重复劳动。

3. CSS预处理器（Sass/Less）：用混合宏（Mixin）抽象通用样式 #

如果用Sass/Less这类预处理器，可以用Mixin把重复的样式逻辑抽出来，更灵活地复用：
比如Sass的写法：

// 定义按钮通用样式的Mixin
@mixin button-base {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

// 主按钮
.btn-primary {
  @include button-base;
  background-color: #007bff;
  color: #fff;

  &:hover {
    background-color: #0056b3;
  }
}

// 危险按钮
.btn-danger {
  @include button-base;
  background-color: #dc3545;
  color: #fff;
}

这种方式比纯CSS更灵活，适合需要大量变体按钮的场景，修改通用样式只需要改Mixin即可。

4. 大型项目/设计系统：用Design Token统一规范 #

如果是团队协作的大型项目，推荐用Design Token（设计令牌）来统一所有样式变量，再结合组件封装：

/* 定义全局Token变量 */
:root {
  --btn-padding: 8px 16px;
  --btn-border-radius: 4px;
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-danger: #dc3545;
}

.btn {
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;

  &:hover {
    background-color: var(--color-primary-hover);
  }
}

这种方式能让整个项目的设计语言完全统一，设计师修改规范后，只需要更新Token变量，所有关联的组件和样式都会同步变化。

总的来说，小项目用CSS类就足够，中大型项目优先封装组件，团队项目加上Design Token，完全能避免手动重复操作，还能大幅降低维护成本！

内容的提问来源于stack exchange，提问作者code_monkey