Cool 3D buttons
A nice collection of buttons you'll want to push over and over again. These 3D buttons call back to a time of shiny silver plastic and tactile experiences.
The buttons
The explanation
The important part here is knowing that each image in
background-image can have a separate
background-clip applied to it.
background: linear-gradient(#bbb, #fff) content-box, linear-gradient(#fff, #999) padding-box, linear-gradient(#999, #fff) border-box;
This uses the background shorthand to set the
background-clip next to each associated
background-image.
Accessibility
It's important to note that the internal dark border
not only
looks good but is necessary for accessibility, based
on the
WCAG contrast rules.
Credit
These buttons are heavily inspired by
Ana Tudor's Codepen.
Rather than using fixed size buttons, I compromised by requiring a child
<span> for the actual text padding.
You can read more about the technique in Ana's CSS Tricks article about background-clip.