Hover Effect

Visual response to pointer hover.

html

<div class="mot-hov-stage">
  <a class="mot-hov-link mot-hov-link--lift" href="#" style="--accent:#E8A020;">Learn more</a>
  <p class="mot-hov-caption">lift effect &middot; hover the link, or toggle Simulate</p>
</div>
<style>
.mot-hov-stage { width: 100%; max-width: 320px; padding: 24px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }
.mot-hov-link { display: inline-block; color: #241430; text-decoration: none; font-weight: 600; padding: 8px 4px; border-bottom: 2px solid transparent; }
.mot-hov-caption { margin: 14px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .mot-hov-link { transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
}
.mot-hov-link--lift:hover, .mot-hov-link--lift.mot-hov-link--sim { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(36,20,48,.2); }
.mot-hov-link--glow:hover, .mot-hov-link--glow.mot-hov-link--sim { box-shadow: 0 0 0 4px var(--accent); border-radius: 6px; }
.mot-hov-link--underline:hover, .mot-hov-link--underline.mot-hov-link--sim { border-bottom-color: var(--accent); }
</style>

tailwind

<div class="w-full max-w-[320px] p-6 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center">
  <a href="#" class="tw-hov tw-hov--lift inline-block text-[#241430] no-underline font-semibold px-1 py-2 border-b-2 border-transparent" style="--accent:#E8A020;">Learn more</a>
  <p class="mt-3.5">lift effect &middot; hover the link, or toggle Simulate</p>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
  .tw-hov { transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; }
}
.tw-hov--lift:hover, .tw-hov--lift.tw-hov--sim { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(36,20,48,.2); }
.tw-hov--glow:hover, .tw-hov--glow.tw-hov--sim { box-shadow: 0 0 0 4px var(--accent); border-radius: 6px; }
.tw-hov--underline:hover, .tw-hov--underline.tw-hov--sim { border-bottom-color: var(--accent); }
</style>

react

export function HoverEffect({
  style = "lift",
  simulate = false,
  duration = 200,
  accent = "#E8A020",
  label = "Learn more",
}) {
  const active = {
    lift: { transform: "translateY(-4px)", boxShadow: "0 6px 14px rgba(36,20,48,.2)" },
    glow: { boxShadow: `0 0 0 4px ${accent}`, borderRadius: 6 },
    underline: { borderBottomColor: accent },
  }[style];
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 24, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", textAlign: "center" }}>
      <a href="#" className="link" style={{ display: "inline-block", color: "#241430", textDecoration: "none", fontWeight: 600, padding: "8px 4px", borderBottom: "2px solid transparent", ...(simulate ? active : {}) }}>
        {label}
      </a>
      <p style={{ margin: "14px 0 0" }}>{style} effect &middot; hover the link, or toggle Simulate</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .link { transition: transform ${duration}ms ease-out, box-shadow ${duration}ms ease-out, border-color ${duration}ms ease-out; }
        }
      `}</style>
    </div>
  );
}