Przyciski 3D z gradientami CSS3 i Sass

Przeglądając różne strony w internecie, często widzimy ładne przyciski wyglądające jak trójwymiarowe. W większości przypadków takie przyciski tworzone są z obrazków – gradientów. CSS3 pozwala nam tworzyć gradienty bez obrazków, przyspieszając development i czas ładowania strony. Kolejnym ważnym czynnikiem jest ich elastyczność w zmianie koloru oraz możliwość skalowania wraz z kontenerami. Próba innych kolorów dla przycisków opartych na obrazkach oznacza zmianę kolorów odpowiadających im obrazków-gradientów, co z pewnością jest czasochłonnym procesem.

Składnia gradientów CSS jest nieco uciążliwa. Podobnie obliczenia jasności dla różnych odcieni koloru. Aby rozwiązać ten problem, stworzyłem miksin Sass, który przyjmuje kolor bazowy jako 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)

Przydatny jest również miksin dla zaokrąglonych rogów:

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

Mając te miksiny, stylowanie przycisku jest znacznie łatwiejsze. Styl dla zielonego przycisku (#77c62f ustawiony jako kolor bazowy):

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

Styl dla czerwonego przycisku w stanie hover, active i focus (#e6572f jako kolor bazowy):

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

Aby umieścić nasz błyszczący przycisk na stronie, możemy użyć prostego znacznika <a>:

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

W 2012 roku gradienty CSS3 były dostępne tylko w przeglądarkach Firefox, Chrome i Safari — ale już wtedy świetnie sprawdzały się na urządzeniach mobilnych, takich jak iPhone czy Android.

Poniżej znajduje się prawdziwy przykład przycisku 3D w CSS3, więc możesz zobaczyć, jak wygląda w Twojej przeglądarce:

Button