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.
button {
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.