Long Shadow Buttons with CSS3 and Sass



Alongside flat design, long shadow design is definitely still rising in popularity. It is used in many ways but still looks best for icons!

In this article I will show you how you can easily make long shadow buttons with CSS3 box-shadow by using Sass. Before we continue, have a look at the demo below! (Note: You can also view the compiled CSS in the demo).

We’ll also look at some best practices to make our code more reusable, where to get the right color values for all the popular brands and using icon fonts. The end result will use no JavaScript and no images at all.

So let’s dig into the code for our long shadow buttons!

Using icon fonts and preparing our HTML

We’ll be using both Zocial and Font Awesome. We use both because we have more icons to pick from, and in this case because the Zocial Facebook icon looks bad IMO (And I chose to make long shadow social buttons for this article).

So let’s import the fonts for our long shadow icons in our Sass CSS.

Note: I use the SCSS syntax which is the preferred syntax since Sass 3.

@import url(http://weloveiconfonts.com/api/?family=fontawesome|zocial);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
  font-family: 'Zocial', sans-serif;
}

Now, let’s add the corresponding HTML. Make a wrapping div and give it an icons class. Inside of that we can simply place tags to link to our social media.

<div class="icons">  
  <a href="#" class="zocial-twitter twitter social-icon"></a>
  <a href="#" class="fontawesome-facebook facebook social-icon"></a>
  <a href="#" class="zocial-stumbleupon stumbleupon social-icon"></a>
  <a href="#" class="zocial-googleplus google-plus social-icon"></a>
</div>

Styling the buttons

Now, as you can see aside from the icon classes, I also added the classes twitter, facebook, stumbleupon and google-plus, as well as the class social-icon. I added this to improve the reusability of the CSS.

The plan here is to make our CSS as reusable as possible. We will be using the twitter, facebook, … classes for the brand colors and their matching shadow values. A good website to get these color values from is BrandColors. We will use the social-icon class for the general icon/button styling (size, border-radius, …).



So let’s style those classes!

  .social-icon {
    text-decoration: none;
    color: white;
    display: inline-block;
    font-size: 2.5em;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 10px;
  }

This is just general styling for an 80px rounded icon button. You can re-use this class for other (non-long shadow) buttons if you want!

Now, let’s add some variables for our brand colors.

$color-twitter: #55acee;
$color-facebook: #3b5998;
$color-stumbleupon: #f74425;
$color-google-plus: #dd4b39;

We will use these values for the background-color, and then use the darken() function to darken the color to use as a shadow color. Before we can make our long shadow, though we will have to add this Sass function definition:

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 35 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

What this does essentially output 35 shadow values. You could make that number 35 smaller or larger according to the size of your buttons.

Now, let’s use these colors and the makelongshadow function to finish off our long-shadow buttons!

  .twitter {
    background: $color-twitter;
    text-shadow: makelongshadow(darken($color-twitter, 10%));
  }

  .facebook {
    background: $color-facebook;
    text-shadow: makelongshadow(darken($color-facebook, 10%));
  }

  .stumbleupon {
    background: $color-stumbleupon;
    text-shadow: makelongshadow(darken($color-stumbleupon, 10%));
  }

  .google-plus {
    background: $color-google-plus;
    text-shadow: makelongshadow(darken($color-google-plus, 10%));
  }

That’s it!

Let’s look at the shadow CSS on one of our long shadow buttons:

.icons .google-plus {
  background: #dd4b39;
  text-shadow: 0px 0px #c23321, 1px 1px #c23321, 2px 2px #c23321, 3px 3px #c23321, 
  4px 4px #c23321, 5px 5px #c23321, 6px 6px #c23321, 7px 7px #c23321, 8px 8px #c23321, 
  9px 9px #c23321, 10px 10px #c23321, 11px 11px #c23321, 12px 12px #c23321, 
  13px 13px #c23321, 14px 14px #c23321, 15px 15px #c23321, 16px 16px #c23321,
  17px 17px #c23321, 18px 18px #c23321, 19px 19px #c23321, 20px 20px #c23321, 
  21px 21px #c23321, 22px 22px #c23321, 23px 23px #c23321, 24px 24px #c23321, 
  25px 25px #c23321, 26px 26px #c23321, 27px 27px #c23321, 28px 28px #c23321, 
  29px 29px #c23321, 30px 30px #c23321, 31px 31px #c23321, 32px 32px #c23321, 
  33px 33px #c23321, 34px 34px #c23321, 35px 35px #c23321;
}

That’s a lot of shadows, right? Thank you Sass for making life easy!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+21Share on StumbleUpon25Share on Reddit34Share on LinkedIn5Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!