Visiting various pages on the web, we often see nice buttons looking like they are 3d.
In most cases those buttons are being made with image – gradients.
CSS3 allows us to create gradients without images, speeding up development and page-loading time.
Another important factor is their flexibility to change color and ability to scale with their containers.
Trying other colors for image-based buttons means changing colors of corresponding gradient-images,
what surely is a time-consuming process.
CSS gradients syntax is a bit cumbersome. So are brightness calculations for different shades of color.
To address this matter, I’ve come up with Sass mixin, which takes base color as argument:
Mixin for rounded corners is also handy:
Having those mixins in place, styling a button is much easier. Style for green button (#77c62f set as base color):
Style for red button when hover, active and focus state (#e6572f set as base color):
This whole sass code compiles to css file:
We can use a simple <a> tag to insert our shiny button into web page:
Unfortunately CSS3 gradients are available only for FireFox, Chrome, Safari. However they are perfect for mobile devices like iPhone or devices with Android.
Below is a real example of CSS3 3D button, so you can see how it looks in your browser: