Fancy SASS Button Icon Fade Tip | Revital Agency
Skip to main content

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.


<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;}
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.

@include btn-span-ease(30px, "../icons/flag-30-white.png");
@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.