); }; export HoverButton; `,__src__:"src/registry/core/example/hover-button-demo.tsx",__event__:"copy_usage_code",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { motion } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'framer-motion'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { PlusIcon } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'lucide-react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React, { useState } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" HoverButtonProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" HoverButton"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"FC"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"HoverButtonProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"> "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [isHovered, setIsHovered] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.button"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex items-center justify-center px-8 py-2.5 bg-[#1c1c1c] text-white rounded-xl relative border border-[#2a2a2a] transition-colors'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onMouseEnter={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsHovered"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"true"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onMouseLeave={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsHovered"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:")"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative gap-2 flex items-center px-8 py-2 justify-center w-full'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.span"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'absolute text-[15px] font-medium'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" x: isHovered "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"?"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" -"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"8"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" transition={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" type: "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'spring'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" stiffness: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"400"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" damping: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"17"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" mass: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0.8"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" Follow"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.span"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'absolute'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ opacity: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", x: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"28"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" opacity: isHovered "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"?"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" transition={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ duration: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0.2"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"PlusIcon"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" size={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"16"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"};"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" HoverButton;"})]})]})})})})}function C(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(d,l)})):d(l)}var b=C;function g(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(_);})(); ;return Component;

Hover Button

Resources