Button component without margin overhangs by 2px

[andysellick]

Description of the issue

The button component uses a 2px box shadow to provide a visual bottom border. This is used primarily instead of an actual bottom border because the other borders are already defined and this would cause a bevelling issue between the bottom and left/right borders. This means that the button component 'overhangs' by 2px at the bottom.

By default the button component has a margin bottom of 32px, which accounts for this 2px and then adds spacing in line with the spacing scale. However on GOV.UK we use the button component without bottom margin in our search filters, where it is supposed to line up with the bottom of a wrapping element. Due to this 2px of box shadow it doesn't, and we have to insert 2px of padding somewhere to account for this.

This is a very small thing, but if there were a way of preserving the look of the button while allowing it to not have this 2px of overhanging box shadow it would make integrating the button component into edge case scenarios like this a little easier.

Steps to reproduce the issue

Normal button appearance:

Button with zero margin applied to the bottom (note 2px overlap with containing element, highlighted):

Use of button in GOV.UK search (mobile view) at bottom of containing element, note slight overlap/misalign with grey left border of container:

Environment (where applicable)

• Operating system: N/A
• Browser: N/A
• Browser version: N/A
• GOV.UK Frontend Version: current (v5.6)

[github-actions]

Uh oh! @andysellick, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[romaricpascal]

Something we may want to try is drawing the shadow using a solid linear-gradient:

.govuk-button {
  background-image: linear-gradient(#002d18);
  background-repeat: repeat-x; // We want to repeat horizontally to properly reach the edges
  background-size: 2px 2px;  
  background-position: bottom;
  background-origin: border-box; // Allow the background to be drawn under the bottom border
}

[romaricpascal]

If we explore border radius, we'll need to think about how they affect the technique we pick. A flat linear gradient would for example not be rounded on the left and right.

Code in the screenshot

.govuk-button ~ .govuk-button {
  margin-left: 10px;
  box-shadow: none;
  padding-bottom: 9px;
}

.govuk-button:nth-child(2) {
  background-image: linear-gradient(#002d18);
  background-repeat: repeat-x; 
  background-size: 2px 2px;  
  background-position: bottom;
  background-origin: border-box;
}

.govuk-button:nth-child(3) {
  &::after {
    content: '';
    position:absolute;
    bottom: 0;
    left: -2px;
    right: -2px;
    top: 0;
    box-shadow: 0 2px 0 #002d18;
    border-radius: inherit;
  }
}