Making 3D Buttons with Sass
I’m a huge fan of the button styles on CSS Tricks, and wanted to create my own.
When I inspected the element, I saw there was a ridiculous amount of box-shadows with alternating hex values:
My first attempt of recreating these buttons involved me writing out the box shadows by hand. After about 10 minutes of guesswork and less than desirable results, I knew there had to be a better way.
Looking for a pattern
Since the box shadow values are growing incrementally in a systematic way, we can loop through some arbitrary number with Sass.
I first thought we could just embed a forloop in a declaration, but doing this will just keep adding box-shadow properties to the rule, overwriting each previous one as we loop through. Additionally, we’ve got no way to handle the alternating colors.
I decided the best way to handle this was to use Sass to build a string of values, such that the desired CSS output was something like:
Ah, yes. A pattern!
What we’re trying to achieve is for each arbitrary number, we want one box shadow 1 pixel visible to the right in one color, and one box shadow 1 pixel visible on the bottom in another color.
That is, for each
$i in the loop, we need to do two things:
- Handle the box shadow visible on the right
- Handle the box shadow visible on the bottom
Once we have each of these things, we can build up a string of values and add them to our
box-shadow property. In order to build a string, we’ll need a Sass function.
append method in sass takes two arguments, and an optional third.
append(THING_APPENDED_TO, THING_APPENDING, SEPARATOR). We’re using ‘comma’ as the third argument to get a comma separated list of each of these box-shadow values. You can read more about the
append() method here http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#append-instance_method.
3d-ifiyng the button
Now, we can add this function to our button:
It looks super 3D, but there’s no interactivity. Let’s add a hover state that moves the button up and to the left 2 pixels, and makes the box shadow 2 pixels longer.
And finally, we can add an
:active state to change the button style on click.
At the moment this works, but there’s a huge amount of repeated and tightly coupled code here. The
box-shadow in the
:hover state should just be 2px greater than whatever the
$offset is and the
transform property should be the
$offset minus 1 pixel.
I know! We can use a mixin!
And finally, we can make our button super 3D by
@include‘ing the mixin:
Edit this Post