button shortcode renders non-clickable padding due to div wrapping anchor element

[Sujan-6905]

Is this a docs issue?

• My issue is about the documentation content or website

Type of issue

Other

Description

The current implementation of the button shortcode renders a div with an a inside. Since the button styling is applied to the div, only the anchor content is clickable, while the surrounding area is non-interactive. This causes a misleading and inconsistent UX.
There are 34 pages using this shortcode, with 37 instances of affected a tags.

Steps to reproduce:

1. Open any page using the {{< button >}} shortcode, e.g., What is a Registry?
2. Scroll to the bottom where the button says “What is Docker Compose?”.
3. Hover near the padded area around the button text.
4. Notice that the cursor changes to pointer only when hovered over the text, but hovering outside the anchor text does nothing.

Expected behavior:

The entire styled button area, including padding, should be clickable and behave like a single link.

Location

https://docs.docker.com/get-started/docker-concepts/the-basics/what-is-a-registry/

Suggestion

Suggested Fix:

Update the shortcode in layouts/shortcodes/button.html to apply the button styles directly to the tag, like so:
<a class="button not-prose" href="{{ $url }}">{{ $text }}</a>

Can I work on this?

I'd be happy to submit a PR for this fix if approved.

[Sujan-6905]

Submitted a PR for this fix: #22811