日本語

How to Use & FAQ

How to use the CSS Hover Effects Gallery, plus frequently asked questions

🖱️ Basic usage

  1. Hover over a card to see the effect in action
  2. Use the category chips (Underline, Border, Background, Text, 3D, Nav accent, Glow & shadow, Transform, Effects) to filter
  3. Click the HTML+CSS button to copy the code. Click a card to review the full code in the sidebar
  4. Change the accent and secondary colors in the sidebar — previews and copied code update together (your colors are saved automatically)

🧩 Applying to your nav menu

  1. Move the contents of the copied <style> tag into your stylesheet
  2. Add the class (e.g. he-ul-left) to your nav <a> elements
  3. Adjust font size and colors to match your design

❓ FAQ

Q. How do I use the copied code?
A. The copy includes both the CSS (inside a <style> tag) and the HTML. Paste it to confirm the motion, then move the CSS into your stylesheet and add the class to your existing nav links.
Q. Is JavaScript required?
A. No. All 100 effects run on pure CSS using :hover with transition / animation. No external libraries are loaded.
Q. Can I match the colors to my site?
A. Yes. Change the accent and secondary colors in the sidebar; both the previews and the copied code update instantly. Edit other colors (like text color) directly in the copied CSS.
Q. Do the effects work on touch devices?
A. :hover behaves differently on touch devices (often firing on tap). Design your navigation so it still works without the hover decoration.
Q. Can I use the code commercially?
A. Yes. The copied code is free for personal and commercial use, no attribution required.
Q. Some effects don't work in my browser
A. "Gradient border spins" and "Blinds close" use CSS @property, which requires a recent Chrome / Edge / Safari / Firefox. "Weight morphs" requires a variable font. All other effects work broadly in modern browsers.

🔗 Related tools

← Back to the gallery