A Better Way to Make Buttons in Sketch
Jon Moore

Jon, this is pretty awesome. I have been messing around with these tips and am having some fun.

However, I ran into an issue, which shows up in your demo file as well. When you change the shape of the button, the “State’s” corners get trimmed excessively or don’t get trimmed if they should.

For instance:

  • switch your Container to Rounded, or Middle
  • switch your State to Focused

I ran into this when I was trying to replicate this but with the intention of making border buttons like Adam Sabla mentioned.

I have been tinkering and this is the best solution I have been able to come up with. Download: button-play.sketch. I’d be curious to hear about what you think

I had to create separate symbols for each corner variation for creating a border. I also need to be able to change the border color. So, I had to create individual symbols for each color.

Funny thing about Sketch, the layer order on the Symbols page affects the order with the Override menu options. So I had to make sure my layers were well organized for the menu.

When all's said and done, this may work for some folks, but it feels overly complex for the small value it generates. Then throw in the learning curve of someone else using it for the first time.