Fancy SASS Button Icon Fade Tip

Fancy SASS Button Icon Fade Tip

Sass is an amazing creation for decreasing custom CSS dev time. If you don’t know what SASS is, its time to stop buying templates and starting writing.

This is a quick tip to efficiently write cool buttons with a fancy icon and fade, using SASS.

The HTML

<div class="start"><a href="/" class="btn btn-red"><span></span>Start Here</a></div> <div class="protect"><a href="/" class="btn btn-xl btn-red"><span></span>Get Protection</a></div>

Thats it. Simple classy buttons with a span in the link. You could also use <i>, but I tend to reserve this for an icon font.

The SASS Setup

The “mixin” is a like a variable chunk of CSS you can use over and over. This takes it a step further with custom inputs.

@mixin btn-span-ease($width, $file){ &:hover > span{width: $width; opacity: 1;} span{ display: inline-block; vertical-align: middle; width: 0; height: $width; background: url($file) center center no-repeat; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-backface-visibility: hidden; } }

fade-ease setups our transition styling, and btn-span-ease setups our icon to be ease’d.

Specific SASS Placement

I’m not going to include my .btn coloring here, you can view source for that easy stuff. Let’s get into applying our mixin to the button.

.start{ .btn{ @include btn-span-ease(30px, "../icons/flag-30-white.png"); } } .protect{ .btn{ @include btn-span-ease(50px, "../icons/shield-50-white.png"); } }

To make the magic happen you just include “btn-span-ease“, define the width of the icon, and the icon file.

Demo

Derek Corneau

Written by:

Derek’s positive attitude makes him an invaluable asset to Revital Agency. As Web Coordinator, he handles any online creative efforts and social media interactions with ease.

SUBSCRIBE TO THE REVITAL AGENCY BLOG

GET FREE MARKETING TIPS & UNCOVER
THE BEST WAYS TO GROW YOUR BUSINESS.

Enter your email address below: