Contribution Request: Buttons Stylesheet

[cyber-adr]

New Stylesheet Submission:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other files using the same name as yours?
• Have you filled in at least the required data for title, author, and stylesheet?
• Is the value of stylesheet a full URL that is publicly accessible and renders an unminified, compiled CSS file?
• Do your styles pass proper contrast for accessibility?
• Have you included @media (prefers-reduced-motion: reduce) to remove animations on *,*::before,*::after?
• Did you style the .skip-link?
• Have you checked on a real mobile device to ensure your responsive design doesn't cause overlaps or overflow scrolling?

[github-actions]

👋 Thanks for participating! I will review as soon as I am able. Please know that I have other priorities, and I appreciate your patience.

Watch for notifications as I may request some small changes to make sure this meets the guidelines.

In a few minutes, the Netlify process at the end of this PR will make a preview available. Look for the message "Deploy preview ready!" then click the "Details" link next to it to launch a preview of your styles. Make changes if needed, and comment if you do so I can re-deploy the preview. Note that the "sponsor footer" is not available to fully style, but you may fix any issues it causes to your layout.

Thanks again, I hope you learned something while making your stylesheet! 💫

[5t3ph]

Hi @cyber-adr - just one edit to make!

Can you come up with a custom focus style for these links? Since they are sticky and right next to the browser, it was very hard to tell they were focused. Maybe an inset outline using a negative value with outline-offset?

[cyber-adr]

Hi @5t3ph I've created a custom style for focusing on the nav bar links using :focus-within and edited the nav bar slightly to make the switch between default style and focus style more appealing and readable.
>768px viewport

<=768px viewport