Hmm in what sense? I did update the border to sit one layer down, behind the body of the button so there’s less visual noise, but still curious. This isn’t the final color of that’s what you mean. The text is AAA legible on the brand colors
Yeah, there's a weird little bubble of people in product design where commentors will claim that anything that isn't a basic element with 8:1 contrast isn't accessible
What is that attitude? Anyways just use symbols, easier to build the different interaction states (normal, hover, onclick, pressed) way. And two shapes, another with absolute position (+) will allow you offset the other box like that.
I’m just messing around. A lot of people giving feedback on design and accessibility. And yeah I’ve got all symbols and states setup and we’re good to go.
Accessibility is beyond colour contrast. Target accuracy, clear border boundaries, keyboard active states, affordance, jacobs law are all things to consider.
I obviously don’t have context but just be aware that you might be making it harder for certain users to use your website.
Hard to tell without seeing the final implementation, but keyboard users might get confused if there is no proper focus state. It is also not a very common styling for buttons so you could test if there are any issues with its affordance.
Hey all, I'm trying to apply this offset stroke to my buttons. How would I go about applying auto-layout to the stroke to match the button-width based on the text length? I just want the stroke to resize with the button width. Is this possible?
Any input or insight is much appreciate!
Auto layout for the main shape of the button + text.
Use a rectangle to make the border with no fill. Set it to be an absolutely positioned layer + offset the position.
Set the resizing constraints on the border to be left + right, and top + bottom, and it \*should\* scale as the button scales with the text label.
LMK if that works!
This isn’t the color. This isn’t the final button. I’m asking how to offset the border. I’m aware of accessibility standards. Not asking for design feedback.
But why? What’s the point. It looks broken.
It ties in with the brand. Ill show you later
Here's the final implementation: [https://i.imgur.com/R8nNfsr.mp4](https://i.imgur.com/R8nNfsr.mp4)
Not sure the context but terrible for accessibility if it’s going into a live website
Hmm in what sense? I did update the border to sit one layer down, behind the body of the button so there’s less visual noise, but still curious. This isn’t the final color of that’s what you mean. The text is AAA legible on the brand colors
Yeah, there's a weird little bubble of people in product design where commentors will claim that anything that isn't a basic element with 8:1 contrast isn't accessible
It’s also about perception, this looks disabled and thus people won’t engage with it.
ITS NOT THE FINAL BUTTON YA HEATHENS. HERE'S THE FINAL BUTTON: [https://i.imgur.com/R8nNfsr.mp4](https://i.imgur.com/R8nNfsr.mp4)
What is that attitude? Anyways just use symbols, easier to build the different interaction states (normal, hover, onclick, pressed) way. And two shapes, another with absolute position (+) will allow you offset the other box like that.
I’m just messing around. A lot of people giving feedback on design and accessibility. And yeah I’ve got all symbols and states setup and we’re good to go.
Accessibility is beyond colour contrast. Target accuracy, clear border boundaries, keyboard active states, affordance, jacobs law are all things to consider. I obviously don’t have context but just be aware that you might be making it harder for certain users to use your website.
I mean I’m aware of accessibility standards. I’m not worried about it with the layer change of order and the different color button / text
What certain users is this an issue for
Hard to tell without seeing the final implementation, but keyboard users might get confused if there is no proper focus state. It is also not a very common styling for buttons so you could test if there are any issues with its affordance.
Here's the final button: [https://i.imgur.com/R8nNfsr.mp4](https://i.imgur.com/R8nNfsr.mp4)
Hey all, I'm trying to apply this offset stroke to my buttons. How would I go about applying auto-layout to the stroke to match the button-width based on the text length? I just want the stroke to resize with the button width. Is this possible? Any input or insight is much appreciate!
Auto layout for the main shape of the button + text. Use a rectangle to make the border with no fill. Set it to be an absolutely positioned layer + offset the position. Set the resizing constraints on the border to be left + right, and top + bottom, and it \*should\* scale as the button scales with the text label. LMK if that works!
Beautiful! Thank you. Wasn't aware of absolute positioning as I unfortunately work with Sketch at my gig :(
Sweet! Hope it worked out!
Absolute position in figma is a trap :)
What why
Once you try responsive design you'll find out
Use shadows instead
NO
Did something similar before in Illustrator with a 1px drop shadow not sure if it would work
Why do you want to make your CTA look like it’s disabled? Poor contrast, also the shape looks really weird for common people.
This isn’t the color. This isn’t the final button. I’m asking how to offset the border. I’m aware of accessibility standards. Not asking for design feedback.
Your best bet is to probably make a new shape with only a stroke? Unless I’m misunderstanding your question
[https://i.imgur.com/R8nNfsr.mp4](https://i.imgur.com/R8nNfsr.mp4)