View Full Version : "Inset" button styles

Steffen Hiller
7 Feb 2011, 2:24 PM
Actually I'm not sure how to call this style, but anybody already created the CSS/Sass for those typical inset buttons used in various iOS apps, see attachment.

They don't seem to be built-in in ST, which surprises me a bit, therefore I thought I better ask before I do them myself. Shouldn't be too difficult.


7 Feb 2011, 8:57 PM
Inset is the correct term, Steffen. You can use -webkit-box-shadow: inset to move the box shadow inside of the box rather than outside of it. You can also do multiple shadow declarations if you separate each by a comma.


div {
-webkit-box-shadow: inset 0 1px 10px red, inset 0 10px 20px blue, inset 0 20px 30px green;

Steffen Hiller
8 Feb 2011, 4:35 AM
Thanks Jay for your help!

I actually did exactly that and it was actually pretty easy.
That's my result for now:

Will generalize and share my code later.
Unfortunately you can't easily override or extend mixins in Sass, but custom mixins will have to do it.

Steffen Hiller
8 Feb 2011, 4:36 AM

8 Feb 2011, 11:17 AM
Looks great!

Steffen Hiller
8 Feb 2011, 3:00 PM
Here's the source code + example: