---
title: "Changing the style of the export buttons in DataTables"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview-pro/datatables/changing-the-style-of-the-export-buttons-in-datatables/"
---

Sometimes you want to change the style of the [export buttons](https://www.gravitykit.com/docs/gravityview-pro/datatables/datatables-buttons/) to match the style of your theme.

While we don't provide CSS support, here are two classes that can quickly help you modify those styles:

![DataTables export buttons with sample entries for business name, details, and industry](https://www.gravitykit.com/wp-content/uploads/2025/10/file-gqvpYx63Vb.png)
```
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: 2px;
    color: white;
    background-color: blue;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
    border: 1px solid #666;
    background-color: black;
}
```

```
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border-radius: 2px;
    color: white;
    background-color: blue;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
    border: 1px solid #666;
    background-color: black;
}
```

The first one is for the normal state of the buttons and the second one is for the hover state.

![DataTables export buttons: 'Copy' hovered, others normal; shows entries list and layout change example](https://www.gravitykit.com/wp-content/uploads/2025/10/file-TcQHBh13ta.png)
*[How to add custom CSS to your website](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-to-your-website/)*