按钮样式宏定义：CSS、SCSS、LESS 示例

按钮样式的宏定义有很多种，具体的宏定义根据不同的编程语言和框架而定。以下是一些常见的按钮样式的宏定义示例：

CSS宏定义：

/* 按钮常规样式 */
.btn {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

/* 按钮悬停样式 */
.btn:hover {
  background-color: #0056b3;
}

/* 按钮按下样式 */
.btn:active {
  background-color: #003380;
}

SCSS宏定义：

/* 按钮样式 */
@mixin button-style($bg-color, $text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: $bg-color;
  color: $text-color;
  cursor: pointer;

  &:hover {
    background-color: darken($bg-color, 10%);
  }

  &:active {
    background-color: darken($bg-color, 20%);
  }
}

/* 使用宏定义创建按钮样式 */
.btn {
  @include button-style(#007bff, #fff);
}

LESS宏定义：

/* 按钮样式 */
.button-style(@bg-color, @text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: @bg-color;
  color: @text-color;
  cursor: pointer;

  &:hover {
    background-color: darken(@bg-color, 10%);
  }

  &:active {
    background-color: darken(@bg-color, 20%);
  }
}

/* 使用宏定义创建按钮样式 */
.btn {
  .button-style(#007bff, #fff);
}

这些示例是一些常见的宏定义方式，具体的宏定义可以根据项目要求和个人喜好进行调整和扩展。