style: hover color and rotation for search icon

ethereum · Jan 24, 2024 · f3e4511 · f3e4511
1 parent be0333a
commit f3e4511
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -27,7 +27,19 @@ import "@docsearch/css"
 
 export const SearchIconButton = forwardRef<IconButtonProps, "button">(
   (props, ref) => (
-    <Button ref={ref} variant="ghost" isSecondary px={1.5} {...props}>
+    <Button
+      ref={ref}
+      variant="ghost"
+      isSecondary
+      px={1.5}
+      _hover={{
+        color: "primary.base",
+        transform: "rotate(5deg)",
+        transition: "transform 0.2s ease-in-out",
+      }}
+      transition="transform 0.2s ease-in-out"
+      {...props}
+    >
       <MdSearch />
     </Button>
   )