3D Buttons with CSS3 gradients and Sass

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 colour and ability to scale with their containers. Trying other colours for image-based buttons means changing colours of corresponding gradient-images, which surely is a time-consuming process.

CSS gradients syntax is a bit cumbersome. So are brightness calculations for different shades of colour. To address this matter, I’ve come up with a Sass mixin, which takes a base colour as argument:

@mixin gradient-background($base_color)
  $color1: adjust-hue(lighten($base_color, 7%), 2)
  $color2: darken($base_color, 4%)
  $color3: darken($base_color, 3%)
  $color4: darken($base_color, 12%)
  background-color: $base_color
  background-image: linear-gradient(top,
                                    $base_color,
                                    $color1 45%,
                                    $color2 55%,
                                    $color3 90%,
                                    $color4)
  background-image: -webkit-linear-gradient(top,
                                            $base_color,
                                            $color1 45%,
                                            $color2 55%,
                                            $color3 90%,
                                            $color4)
  background-image: -moz-linear-gradient(top,
                                         $base_color,
                                         $color1 45%,
                                         $color2 55%,
                                         $color3 90%,
                                         $color4)

A mixin for rounded corners is also handy:

@mixin border-radius($radius)
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius

Having those mixins in place, styling a button is much easier. Style for a green button (#77c62f set as base colour):

a.button
  font-family: verdana
  color: #FFF
  @include border-radius(8px)
  @include gradient-background(#77c62f)
  text-shadow: 1px 1px 2px #000
  font-size: 40px
  padding: 5px 60px
  text-align: center
  text-decoration: none
  font-weight: bold

Style for a red button on hover, active and focus state (#e6572f set as base colour):

a.button
  &:hover, &:active, &:focus
    @include gradient-background(#e6572f)

We can use a simple <a> tag to insert our shiny button into a web page:

<a class="button" href="https://www.google.com">Button</a>

Back in 2012, CSS3 gradients were only available in Firefox, Chrome and Safari — but they were already perfect for mobile devices like the iPhone or Android.

Below is a real example of a CSS3 3D button, so you can see how it looks in your browser:

Button