*Nakshora from Zero (Nakshora 3.1) — chapter 4 of 6.* Hover, focus and dark variants.

What you will build#

Interactive polish with zero JS.

Step by step#

example
html
<button class="px-5 py-2.5 bg-blue-500 hover:bg-blue-600 active:scale-95 focus-visible:ring-2 ring-blue-300 rounded-lg text-white transition">
  Save changes
</button>

Why it works#

State variants compile to pseudo-classes in the correct cascade order.

Try it yourself#

  • Add a dark: variant
  • Remove transition and feel the difference
  • Try disabled:opacity-50

Series navigation#

tutorials/index|All tutorials · tutorials/from-zero/responsive-basics|← Responsive in ten minutes · tutorials/from-zero/components|Use design components →