Implement Updated Button Component from Design System also Fixes Text Overflow Issues

[jenish-thapa]

Pull Request: Implement Updated Button Component from Design System

Description

This PR addresses the issue where the text on the 'Previous' and 'Next' buttons was coming out of the box in certain languages, like Russian, and was touching the underline. This was especially noticeable on the page ethereum.org/en/developers/docs/evm/opcodes/.

Changes Made

• Implemented the updated button component from the design system, as per the Figma file provided here.
• Adjusted the styles to ensure the text does not touch the underline and stays within the button boundaries.
• Tested the implementation across different languages to ensure consistent rendering.

Screenshots

• Light Mode:

• Dark Mode:

How to Test

1. Navigate to ethereum.org/en/developers/docs/evm/opcodes/.
2. Scroll down to the 'Previous' and 'Next' buttons.
3. Verify that the text stays within the button boundaries and does not touch the underline in various languages.

Additional Context

• This change aims to provide a more sustainable fix by aligning with the design system.

Issue Link

Fixes #13405

Feel free to assign the task to me. Looking forward to your feedback!

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	f21825a
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66a665efbb3107000878e649
😎 Deploy Preview	https://deploy-preview-13523--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 42 (🔴 down 9 from production) Accessibility: 93 (no change from production) Best Practices: 91 (🔴 down 8 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jenish-thapa]

Hi @wackerow, please check the preview. Also please let me know if any modifications required

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[nloureiro]

@jenish-thapa Oh, this looks very good. Thank you!!!!

I was testing, and they should not collapse. I'm double-thinking and testing on your dev preview and prefer higher buttons over one on top of the other.

So, from the design side, I think we should make them:

• always side by side
• make the all the same height > height of the biggest one.
• alight the content to the center

Something like this:

What do you think?

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[nloureiro]

@jenish-thapa are you still up to finishing this based on my last comments?

[wackerow]

@all-contributors please add @jenish-thapa for ideas

[allcontributors]

@wackerow

I've put up a pull request to add @jenish-thapa! 🎉