Add a pretty JupyterLite button to docs

[mfisher87]

Description

I knew I had seen this somewhere! Someone amazing found it :) https://jupyter.zulipchat.com/#narrow/channel/474838-jupyterlite/topic/Beautiful.20.22Try.20JupyterLite.22.20button/near/494275235

Checklist

• PR has a descriptive title and content.
• PR description contains references to any issues the PR resolves, e.g. Resolves #XXX.
• PR has one of the labels: documentation, bug, enhancement, feature, maintenance
• Checks are passing.
  Failing lint checks can be resolved with:
  • pre-commit run --all-files
  • jlpm run lint

---

📚 Documentation preview: https://jupytergis--361.org.readthedocs.build/en/361/
💡 JupyterLite preview: https://jupytergis--361.org.readthedocs.build/en/361/lite

[github-actions]

👈 Launch a Binder on branch mfisher87/jupytergis/jupyterlite-pretty-button

[github-actions]

Integration tests report: appsharing.space

[mfisher87]

I love the yellow and black combination :) 🐝

[martinRenou]

Thanks!! Looks neat

[agriyakhetarpal]

I think it also makes sense for us to make the hover effect something else, right? Not only does the current change from black text to white text feel too abrupt, the white text also breaks a11y: https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=F7DC1F 🙈

I opine that an apt effect could be to either transform(1.05) the button, or perhaps make it glow at the borders.

I've noticed the problem on the jupyterlite-sphinx side before, but haven't got around to fixing it!

[mfisher87]

Great point, thank you for thinking of accessibility! Would you suggest just leaving the text as black on hover? There's already a slight yello glow effect on the button when hovering, and I think slightly scaling the button up on hover would also look nice. The white/yellow colorscheme really contributes to the "light bulb feel" (I think the abruptness of the hover effect also contributes to that); maybe putting a white glow on the black text would achieve the same while also maintaining high contrast?