<div class="wrapper"> <span class="icon icon-alarm"></span> <span class="icon icon-cool"></span> <span class="icon icon-bubbles"></span>  <span class="icon icon-heart"></span>
  
</div>
@mixin long-shadow($type, $color, $length, $fadeout: true, $skew: false, $direction: right){
  $shadow: '';
  @if $skew == false or $type == text{
    @if $direction == right {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $color + ',';
      }
    }
    @if $direction == left {
      @for $i from 0 to $length - 1 {
        $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $color + ',';
       }
      }
     }
        
   @if $fadeout == true{
    @for $i from 1 to $length - 1 {
      @if $type == text or $skew == false{
        @if $direction == right{
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left{
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' +       rgba($color, 1 - $i / $length) + ',';
        }
      }
      @if ($type == box) and $skew == true{
        @if $direction == right {
          $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
        @if $direction == left {
          $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
        }
      }
  }
  $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba($color, 0);
 }
 @if $fadeout == false{
   @if $skew == true and ( $type == box ){
     @for $i from 0 to $length - 1 {
            $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .1 + 'px ' + $color + ',';
      }
   }
    $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba(0,0,0,0);
 }
 $shadow: unquote($shadow);
  @if $type == 'box' {box-shadow: $shadow;}
  @if $type == 'text' {text-shadow: $shadow;}
}

@font-face {
	font-family: 'svg-dec';
	src:url('https://yoksel.github.io/assets/fonts/icomoon-svg-dec/svg-dec.eot?-824yne');
	src:url('https://yoksel.github.io/assets/fonts/icomoon-svg-dec/svg-dec.eot?#iefix-824yne') format('embedded-opentype'),
		url('data:application/octet-stream;base64, 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')  format('woff'), 
		url('https://yoksel.github.io/assets/fonts/icomoon-svg-dec/svg-dec.ttf?-824yne') format('truetype'),
		url('https://yoksel.github.io/assets/fonts/icomoon-svg-dec/svg-dec.svg?-824yne#svg-font-fullsize') format('svg');
	font-weight: normal;
	font-style: normal;
}

A {
  color: tomato;
  }

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 550px;
  height: 120px;
  padding: 25px;
  text-align: center;
  color: #333;
  }

.icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 1rem;
    font-family: 'svg-dec';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    font-size: 6em;
    transition: .3s;
    cursor: pointer;
  }

.icon:before {
    transition: .3s;
  }

.icon-cool:before {
  text-shadow: 1px 1px white,
               2px 2px white,
               3px 3px #333;
	  content: "\e602";
  }
.icon-cool:hover {
  transform: rotate(180deg);
  }
.icon-cool:hover:before {
  color: crimson;
  }

.icon-alarm:before {
	  content: "\e600";
  color: #AAA;
	  text-shadow: 0 0 3px #AAA,
               0 0 5px #AAA,
               0 0 7px #AAA;
  }
.icon-alarm:hover:before {
  color: orangered;
  text-shadow: 0 0 0 transparent;
  }

.icon-bubbles:before {
	  content: "\e601";
  text-shadow: 5px 3px 0 rgba(0,0,0,.1);
  color: lightskyblue;
  }  
.icon-bubbles:hover:before {
  text-shadow: -5px -3px 0 rgba(0,0,0,.1);
  color: deepskyblue;
  }  
.icon-heart {
  overflow: hidden;
  background: hotpink;
  @include long-shadow(text, lighten(mediumvioletred, 0), 45, false, false, right);
  border-radius: 1rem;
  font-size: 4.5rem;
  line-height: 6.5rem;
  color: #FFF;
  }
.icon-heart:hover {
  @include long-shadow(text, lighten(mediumvioletred, 0), 45, false, false, left);
  }
.icon-heart:before {
  content: "\68";
  }

.links {
  margin-top: 40px;
  text-align: left;
  font-style: italic;
  line-height: 1.3;
  color: #999;
  }
View Compiled
/*
    Icons: https://icomoon.io
    Long Shandow Mixin: https://codepen.io/awesomephant/pen/mAxHz
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.