如何使用Bootstrap 5修改DataTables按钮颜色？

方法一：全局统一修改所有按钮 #

直接通过CSS覆盖DataTables按钮的默认样式，适合需要统一所有按钮风格的场景：

/* 基础按钮样式 */
.dt-button {
  background-color: #2c3e50 !important; /* 自定义背景色 */
  color: #ffffff !important; /* 文字颜色 */
  border: none !important;
  border-radius: 4px !important; /* 可选：添加圆角 */
}

/* 鼠标悬停状态 */
.dt-button:hover {
  background-color: #34495e !important; /* 稍深的hover色调 */
}

/* 按钮点击激活状态 */
.dt-button:active {
  background-color: #1a252f !important;
}

注：!important用于强制覆盖DataTables内置CSS的优先级，如果你页面中自定义样式的引入顺序在DataTables官方CSS之后，也可以省略!important。

方法二：单独定制特定按钮 #

如果需要给不同功能的按钮设置差异化颜色，可以在初始化DataTables时给每个按钮添加自定义类，再针对性编写CSS：

第一步：修改DataTables初始化代码，添加className属性

$(document).ready(function() {
    $('#reportTable').DataTable({
        buttons: [
            // 给搜索面板按钮加自定义类
            {
                extend: 'searchPanes',
                className: 'btn-searchpanes'
            },
            // 给列可见性按钮加自定义类
            {
                extend: 'colvis',
                className: 'btn-colvis'
            },
            // 打印按钮及拆分的导出按钮分别加自定义类
            {
                extend: 'print',
                split: [ 
                    { extend: 'pdf', className: 'btn-pdf' },
                    { extend: 'excel', className: 'btn-excel' },
                    { extend: 'csv', className: 'btn-csv' }
                ],
                className: 'btn-print'
            }
        ],
        // 以下为你原有的配置，保持不变
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        fixedHeader: true,
        columnDefs: [ 
            { targets: [0,1,2,3,4,7,10], visible: true}, 
            { targets: '_all', visible: false }, 
            {
                orderable: false,
                className: 'select-checkbox',
                targets:   0
            }
        ],
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        order: [[7, 'desc']],
        "dom": "<'row mb-3'<col-6 col-md-4'l><'col-6 col-md-4 'B><'col-6 col-md-4'f>>" + 
               "<'row my-4'<col-sm-12'tr>>" +
               "<'row'<col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
    });
});

第二步：针对自定义类编写CSS样式

/* 搜索面板按钮 */
.btn-searchpanes {
  background-color: #27ae60 !important;
  color: #fff !important;
}

/* 列可见性按钮 */
.btn-colvis {
  background-color: #3498db !important;
  color: #fff !important;
}

/* 打印按钮 */
.btn-print {
  background-color: #f39c12 !important;
  color: #fff !important;
}

/* PDF导出按钮 */
.btn-pdf {
  background-color: #e74c3c !important;
  color: #fff !important;
}

/* Excel导出按钮 */
.btn-excel {
  background-color: #16a085 !important;
  color: #fff !important;
}

/* CSV导出按钮 */
.btn-csv {
  background-color: #9b59b6 !important;
  color: #fff !important;
}

/* 可选：给按钮添加hover效果 */
.btn-searchpanes:hover {
  background-color: #229954 !important;
}

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