I drew cat paws with pure CSS (no images!)

okay so, in moon mode the navigation buttons turn into little cat paw beans, but i didn't use any images, the whole paw is drawn with css!!!.

when i started i just assumed i'd need a png or an svg, but i wanted the paws to recolor with the theme (the css variables from the other post), and images dont do that, and also i wanted the paws to have the same style as the sunny buttons, so i tried to look for another way using only css instead.

the trick is ::before and ::after, every element gets two of these "free" invisible boxes you can style and place wherever you want, a paw is basically one big rounded pad plus four little toe beans, so:

• the button itself is the main pad, shaped with a border-radius (that weird 45% 45% 50% 50% / 55% 55% 40% 40% value gives it the bean look instead of an oval).
• ::before and ::after become two of the toes.
• and since i needed four toes but only had two pseudo-elements on the button, i borrowed two more from the inner <div> and <span>, its tricky but it works.

then each toe just gets pushed above the pad with top, left and a little rotate() so they fan out naturally,

the other thing i learned here was faking that "sticker" outline the whole site has, that giant stack of box-shadows isnt one shadow, its like 15 tiny ones offset by half a pixel each, which builds up into a solid 3d edge:

box-shadow:
  0.5px 0.5px 0 0 var(--stone-800),
  1px 1px 0 0 var(--stone-800),
  1.5px 1.5px 0 0 var(--stone-800),
  ... and so on

its a lot to look at in the code and it took me some hours of just refining it but the effect is so worth it,

instead of using an image, i drew it, its more flexible, it recolors with your theme, and it weighs basically nothing, plus telling people your buttons are hand-coded cat paws is great.