Border 3px on hover/focus on search submit makes other form items jump

[markconroy]

When you hover over the search submit button in the header, it changes from a 1px border to a 3px border, making it just a bit and the text inside the button to move 2px to the right.

The bigger issue with this is that all buttons jump. So if you go to the contact form at /contact and hover the preview or send button it causes 6px of movement.

Should we just keep the border at 1px for hover state? Same as default state.

Current:

Proposed:

[fuzzbomb]

Are these supposed to have square or round corners? The buttons here look round at one end and square at the other.

If they have square corners, you could try outline width instead of border width. Also perhaps outline-offset, to get a bigger ring.

The outline properties don't cause a change in box model AFAIK, but outline can't have a radius - that's a trade-off

[fuzzbomb]

You can get around the jump by setting a height and width for the .form-submit. I tried it with height: 3em; width:10em. I'm not sure if the width approach is robust enough for any button text, but this is a demo site, and "send message" is at least a two word button and that works. Maybe the max+min width properties can be used?

[fuzzbomb]

If we leave the border at the same thickness, then it's conveying focus by colour alone.

The default browser focus outline is unreliable, so I suggest we either suppress it in favour of a border thickness change, or replace it with an explicit outline of our own. (In Chrome the blue outline is still there, but in Firefox there's no browser focus outline.)

Here's what I arrived at, messing in Firefox dev tools:

.button:focus {
    background-color: #e6eee0;
    border: 1px solid #00836d;
    color: #000000;
    text-decoration: none;
    transition: background-color 0.5s ease;
    outline-color: #00836d;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: 3px;
}

Here we see a border and an outline on focus. The border remains 1px, but changes colour. The outline has an offset to make it appear more like a ring. All the button corners have a border radius, but there's no outline radius property to match it nicely (Well, there's -moz-border-radius at least). Outlines don't mess with box size, so no jumpiness happens.

outline-offset can be negative, so it goes inside the button. IE11 doesn't support outline-offset.

Twitter have a similar focus style on their compose-tweet dialog, not sure how they implemented the roundiness.

Do these tricks give you any ideas?

If we can fix the jump, I'm happy with the border-width change, and outline: none. Don't use border-color: transparent as the default though.

[tomphippen]

@markconroy @fuzzbomb I'm just looking at this now along with the search results.

I'm thinking the simplest solution might be to change the padding on hover & keep the larger border width

.form-submit:hover {
  padding-top: calc(0.6em - 2px);
  padding-right: calc(1.25em - 2px);
  padding-bottom: calc(0.4em - 2px);
  padding-left: calc(1.25em - 2px);
}

[markconroy]

That looks nice @tom.

I'm going to be working on the site in the afternoon, so I'll have a try at something like that.

Also, well spotted @fuzzbomb on the rounded/square corners. I think we were too generic in theming .form-submit with only 2 rounded corners. I'll tackle that as well.

[tomphippen]

@markconroy don't worry about the rounded corners, it was an overly generic selector that was supposed to target only the search one (as it bumps up to the search field), I've got it fixed locally

[markconroy]

Great stuff. Thanks.

[tomphippen]

The latest commit I think fixes all the issues mentioned in the thread.

Also does the design that Keith mocked up

As discussed on slack this is achieved by putting the form-search underneath the button with some right padding. Looking forward to Edge 21 being released and :focus-within being usable.

[markconroy]

We need to support IE11.

I guess that means we can't ever use :focus-within, doesn't it?

[tomphippen]

Yeah, there is the ally.js library that has a polyfill, but probably not worth it in terms of the additional complexity (and based on what Keith's been talking about today possible licence issues)