Customizing Ant Design Button Hover: Four Examples!

Ant Design buttons can have their hover color customized or removed easily by creating the right CSS selector and style. In this tutorial I will update hover color for all AntD buttons, for individual AntD buttons, and for different button types (dashed, text, etc). I will also show how to remove button hover.

Here are the buttons we will create:

Full code for this tutorial can be found in the Resources section.

Change Ant Design Button Hover Color for a Single Button

I styled a single Ant Design button’s hover color by creating a custom class and adding a hover selector on that class:

.custom-button-hover:hover {
  background-color: purple;
  border: 2px solid orange;
  border-radius: 4px;
}

Be sure to apply the new class to your button using className="custom-button-hover".

Buttons have some default hover styling on them. The main values are color, border-color, and background. The background color is fff (white) even when the button is not hovered. These are the values that need to be overridden for custom hover styling.

Later I applied hover styling to all buttons. This overrode the styling for my custom-button-hover class, so I needed to update the selector:

.ant-btn.custom-button-hover:hover
  /*.ant-btn only needed if .ant-btn:hover specified elsewhere*/

Change Ant Design Button Hover Color for all Buttons

If you want to apply custom hover color to all buttons in Ant Design, use the built-in ant-btn class:

.ant-btn:hover {
  background-color: yellow;
  border: 2px solid grey;
  border-radius: 4px;
}

This overrides the default hover styling without the need for !important or inline styling.

Ant Design buttons do not have border radius by default, even when not hovered. I included it in the hover styling in this example, but even better is to add border radius to all .ant-btn components even when hover is not applied.

Ant Design Button Hover for Different Button Types

Ant Design comes with several button type options. This is similar to button variants in Material UI.

I applied the dashed type to a button and saw that this added a class in the DOM:

It also had typical AntD button hover styling.

I targeted the ant-btn-dashed class to apply custom styling only to dashed buttons:

.ant-btn.ant-btn-dashed:hover {
  border-color: red;
  background-color: inherit;
  border-style: dashed;
}

I included border-style because this got overridden by my .ant-btn button styling in the previous section.

The same technique can be used for any Ant Design button type. For example, a “text” button adds class ant-btn-text and this can be targeted for styling only text buttons.

Remove Ant Design Button Remove Hover Style

If you need to remove the default hover style on Ant-Design buttons, use the following code:

.ant-btn:hover {
  color: initial;
  border: 1px solid #d9d9d9;
}

This overrides the default hover styling with the default non-hover Ant Design button style.

Here’s an example where I remove styling from MUI Buttons on hover, which are more complex than Ant Design buttons.

Resources

Ant Design Icon Buttons have similar styling properties to regular buttons.

Ant Design Button Docs

Full code for this tutorial:

//index.css

.ant-btn.custom-button-hover:hover {
  /*.ant-btn only needed if .ant-btn:hover specified elsewhere*/
  background-color: purple;
  border: 2px solid orange;
  border-radius: 4px;
}

.ant-btn.ant-btn-dashed:hover {
  border-color: red;
  background-color: inherit;
  border-style: dashed;
}

.ant-btn {
  margin: 12px;
}

.ant-btn:hover {
  /* background-color: yellow;
  border: 2px solid grey;
  border-radius: 4px; */
  color: initial;
  border: 1px solid #d9d9d9;
}
/* .ant-btn {
  pointer-events: none;
  all: unset

} */

.layout-div {
  display: flex;
}

//HoverButton.tsx
import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Button } from "antd";

const ButtonHover: React.FC = () => (
  <>
    <div className="layout-div">
      <Button
        className="custom-button-hover"
        size="large"
        onClick={() => console.log("here")}
      >
        Button 1
      </Button>
      <Button size="large" type="dashed">
        Button 2
      </Button>
      <Button size="large">Button 3</Button>
    </div>
    <a href="https://smartdevpreneur.com/the-complete-guide-to-ant-design-icon-button-size-and-style/">
      Read more about Ant Design Icon Buttons here
    </a>
  </>
);

export default ButtonHover;