diff --git a/packages/editor/src/components/button.tsx b/packages/editor/src/components/button.tsx
index f7f21110c..9bfdf404e 100644
--- a/packages/editor/src/components/button.tsx
+++ b/packages/editor/src/components/button.tsx
@@ -4,6 +4,8 @@ import { Button as RebassButton, ButtonProps } from "rebass";
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, forwardedRef) => {
+    const { sx, ...buttonProps } = props;
+    const hoverBg = (sx as any)?.[":hover"]?.["bg"] || "hover";
     const buttonRef = useRef<HTMLButtonElement>();
 
     useEffect(() => {
@@ -27,7 +29,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <RebassButton
-        {...props}
+        {...buttonProps}
+        sx={{
+          ...sx,
+          ":hover": { bg: ["transparent", hoverBg] },
+          ":active": { bg: hoverBg },
+        }}
         ref={(ref) => {
           buttonRef.current = ref;
           if (typeof forwardedRef === "function") forwardedRef(ref);
diff --git a/packages/editor/src/toolbar/components/split-button.tsx b/packages/editor/src/toolbar/components/split-button.tsx
index 54a6e76f5..97ba173a2 100644
--- a/packages/editor/src/toolbar/components/split-button.tsx
+++ b/packages/editor/src/toolbar/components/split-button.tsx
@@ -26,15 +26,16 @@ function _SplitButton(props: PropsWithChildren<SplitButtonProps>) {
         sx={{
           borderRadius: "default",
           bg: toggled ? "hover" : "transparent",
-          ":hover": { bg: "hover" },
+          ":hover": { bg: [toggled ? "hover" : "transparent", "hover"] },
+          ":active": { bg: toggled ? "hover" : "transparent" },
         }}
       >
-        <ToolButton {...toolButtonProps} toggled={toggled} />
+        <ToolButton {...toolButtonProps} toggled={false} />
         <Button
           sx={{
             p: 0,
             m: 0,
-            bg: toggled ? "hover" : "transparent",
+            bg: "transparent",
             ":hover": { bg: "hover" },
             ":last-of-type": {
               mr: 0,
diff --git a/packages/editor/src/toolbar/components/tool-button.tsx b/packages/editor/src/toolbar/components/tool-button.tsx
index 8c1061d2e..494a93f29 100644
--- a/packages/editor/src/toolbar/components/tool-button.tsx
+++ b/packages/editor/src/toolbar/components/tool-button.tsx
@@ -42,8 +42,7 @@ export const ToolButton = React.memo(
           m: 0,
           bg: toggled ? "hover" : "transparent",
           mr: variant === "small" ? 0 : 1,
-          ":hover": { bg: ["transparent", "hover"] },
-          ":active": { bg: "hover" },
+          ":hover": { bg: "hover" },
           ":last-of-type": {
             mr: 0,
           },