I'm working on a project and I get the designs for this button style and I am really happy how it all came together. At first I thought that a CodePen I came across talking about double border buttons would help, but it didn't ultimately. Then I came across the excellent negative border radius example by Lea Verou and it really helped, but it didn't address the double borders.

I then decided to use the :before and :after of the button to also create that same negative round border style shape (that doesn't even use border-radius, it uses radial gradients!!). I take them and extend them out from the button; twice, in two different colors.

See the Pen Double Negative Borders by Evan Lovely (@EvanLovely) on CodePen.

I'm having a very strange problem though: when the button is an odd number of pixels, it gets a white line through (the background color) because the 4 radial gradients used to create this don't evenly meet in the middle. I'd love to hear some ideas on how to fix it!

Also, I know I definitely need to uses some Compass Mixins to keep that code tight.