cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="wrapper">
	<h1>Square Long Shadow Icons</h1>
	<a href="#" class="apple long-shadow square"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen long-shadow square"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 long-shadow square"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble long-shadow square"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github long-shadow square"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 long-shadow square"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram long-shadow square"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin long-shadow square"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal long-shadow square"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest long-shadow square"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss long-shadow square"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify long-shadow square"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter long-shadow square"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress long-shadow square"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube long-shadow square"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play long-shadow square"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Rounded Long Shadow Icons</h1>
	<a href="#" class="apple long-shadow rounded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen long-shadow rounded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 long-shadow rounded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble long-shadow rounded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github long-shadow rounded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 long-shadow rounded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram long-shadow rounded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin long-shadow rounded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal long-shadow rounded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest long-shadow rounded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss long-shadow rounded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify long-shadow rounded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter long-shadow rounded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress long-shadow rounded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube long-shadow rounded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play long-shadow rounded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Circle Long Shadow Icons</h1>
	<a href="#" class="apple long-shadow circle"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen long-shadow circle"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 long-shadow circle"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble long-shadow circle"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github long-shadow circle"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 long-shadow circle"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram long-shadow circle"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin long-shadow circle"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal long-shadow circle"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest long-shadow circle"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss long-shadow circle"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify long-shadow circle"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter long-shadow circle"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress long-shadow circle"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube long-shadow circle"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play long-shadow circle"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper squares">
	<h1>Square Icons</h1>
	<a href="#" class="apple square"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen square"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 square"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble square"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github square"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 square"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram square"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin square"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal square"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest square"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss square"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify square"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter square"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress square"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube square"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play square"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper gradients squares">
	<h1>Square Gradient Icons</h1>
	<a href="#" class="apple gradient square"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen gradient square"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 gradient square"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble gradient square"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github gradient square"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 gradient square"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram gradient square"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin gradient square"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal gradient square"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest gradient square"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss gradient square"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify gradient square"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter gradient square"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress gradient square"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube gradient square"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play gradient square"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper rounds">
	<h1>Rounded Icons</h1>
	<a href="#" class="apple rounded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen rounded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 rounded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble rounded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github rounded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 rounded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram rounded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin rounded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal rounded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest rounded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss rounded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify rounded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter rounded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress rounded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube rounded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play rounded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper rounds">
	<h1>Rounded Gradient Icons</h1>
	<a href="#" class="apple gradient rounded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen gradient rounded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 gradient rounded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble gradient rounded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github gradient rounded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 gradient rounded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram gradient rounded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin gradient rounded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal gradient rounded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest gradient rounded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss gradient rounded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify gradient rounded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter gradient rounded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress gradient rounded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube gradient rounded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play gradient rounded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper circles">
	<h1>Circle Icons</h1>
	<a href="#" class="apple circle"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen circle"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 circle"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble circle"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github circle"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 circle"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram circle"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin circle"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal circle"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest circle"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss circle"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify circle"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter circle"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress circle"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube circle"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play circle"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Left Shaded Icons</h1>
	<a href="#" class="apple left-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen left-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 left-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble left-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github left-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 left-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram left-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin left-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal left-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest left-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss left-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify left-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter left-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress left-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube left-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play left-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Left Shaded Icons</h1>
	<a href="#" class="apple rounded left-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen rounded left-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 rounded left-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble rounded left-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github rounded left-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 rounded left-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram rounded left-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin rounded left-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal rounded left-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest rounded left-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss rounded left-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify rounded left-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter rounded left-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress rounded left-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube rounded left-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play rounded left-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Left Shaded Circle Icons</h1>
	<a href="#" class="apple circle left-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen circle left-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 circle left-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble circle left-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github circle left-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 circle left-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram circle left-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin circle left-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal circle left-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest circle left-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss circle left-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify circle left-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter circle left-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress circle left-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube circle left-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play circle left-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Diagonal Shaded Icons</h1>
	<a href="#" class="apple dia-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen dia-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 dia-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble dia-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github dia-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 dia-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram dia-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin dia-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal dia-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest dia-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss dia-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify dia-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter dia-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress dia-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube dia-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play dia-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Diagonal Shaded Rounded Icons</h1>
	<a href="#" class="apple rounded dia-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen rounded dia-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 rounded dia-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble rounded dia-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github rounded dia-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 rounded dia-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram rounded dia-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin rounded dia-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal rounded dia-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest rounded dia-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss rounded dia-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify rounded dia-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter rounded dia-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress rounded dia-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube rounded dia-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play rounded dia-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

<div class="wrapper">
	<h1>Diagonal Shaded Circle Icons</h1>
	<a href="#" class="apple circle dia-shaded"><i class="fa fa-apple"></i></a>
	<a href="#" class="codepen circle dia-shaded"><i class="fa fa-codepen"></i></a>
	<a href="#" class="css3 circle dia-shaded"><i class="fa fa-css3"></i></a>
	<a href="#" class="dribbble circle dia-shaded"><i class="fa fa-dribbble"></i></a>
	<a href="#" class="github circle dia-shaded"><i class="fa fa-github"></i></a>
	<a href="#" class="html5 circle dia-shaded"><i class="fa fa-html5"></i></a>
	<a href="#" class="instagram circle dia-shaded"><i class="fa fa-instagram"></i></a>
	<a href="#" class="linkedin circle dia-shaded"><i class="fa fa-linkedin"></i></a>
	<a href="#" class="paypal circle dia-shaded"><i class="fa fa-paypal"></i></a>
	<a href="#" class="pinterest circle dia-shaded"><i class="fa fa-pinterest"></i></a>
	<a href="#" class="rss circle dia-shaded"><i class="fa fa-rss"></i></a>
	<a href="#" class="spotify circle dia-shaded"><i class="fa fa-spotify"></i></a>
	<a href="#" class="twitter circle dia-shaded"><i class="fa fa-twitter"></i></a>
	<a href="#" class="wordpress circle dia-shaded"><i class="fa fa-wordpress"></i></a>
	<a href="#" class="youtube circle dia-shaded"><i class="fa fa-youtube"></i></a>
	<a href="#" class="youtube-play circle dia-shaded"><i class="fa fa-youtube-play"></i></a>
</div>

            
          
!
            
              @import "neat@2.*";
@import "bourbon@5.*";
@mixin textShadow($color, $depth: 5, $direction: 'down') {
	$i: 1;
  	$coord-x: 0;
  	$coord-y: 0;
  
  	// Directions
  	@if $direction == 'top' {
		$coord-x: 0;
		$coord-y: -1;
  	}
  
	@if $direction == 'top-right' {
		$coord-x: 1;
		$coord-y: -1;
	}

	@if $direction == 'bottom' {
		$coord-x: 0;
		$coord-y: 1;
 	}
  
	@if $direction == 'bottom-right' {
    	$coord-x: 1;
    	$coord-y: 1;
	}
  
	@if $direction == 'bottom-left' {
    	$coord-x: -1;
    	$coord-y: 1;
	}

	@if $direction == 'left' {
    	$coord-x: -1;
    	$coord-y: 0;
	}
  
	@if $direction == 'top-left' {
    	$coord-x: -1;
    	$coord-y: -1;
	}

	$shadow: ();
	@while $i <= $depth {
    	$shadow-part: #{$coord-x * $i}px #{$coord-y * $i}px $color;
    	$shadow: append($shadow, $shadow-part, comma);
    	$i: $i + 1;
  }

  text-shadow: unquote($shadow);
}

.wrapper {
	position: relative;
	display: block;
	width: 65%;
	height: auto;
	margin: 0 auto 50px;
	clear: left;
	//background-color: black;
	
	h1 {
		position: relative;
		display: block;
		text-align: center;
		font-weight: 100;
	}
	
	&.squares {
		
		.square {
			transition: border-radius 150ms ease, transform 350ms ease;
			
			&:hover {
				border-radius: 50%;
				transform: rotate(360deg);
			}
		}
		
		.gradient {
			&:hover {
				&:before {
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	&.rounds {
		
		.rounded {
			transition: transform 350ms ease, border-radius 350ms ease;
			
			i {
				transition: transform 350ms ease;
			}
			
			&:hover {
				border-radius: 50%;
				transform: rotate(45deg);
				
				i {
					transform: rotate(-45deg);
				}
			}
		}
		
		.gradient {
			&:hover {
				&:before {
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	&.circles {
		
		.circle {
			transition: transform 350ms ease;
			box-shadow: 0 0 0 rgba(black,0.0);
			
			i {
				transition: transform 350ms ease, box-shadow 350ms ease;
			}
			
			&:hover {
				border-radius: 5px;
				transform: rotate(90deg);
				box-shadow: 0 0 15px rgba(black,0.3);
				
				i {
					transform: rotate(-90deg);
				}
			}
		}
	}
}

a {
	position: relative;
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 0;
	overflow: hidden;
	float: left;
	z-index: 0;
	
	&:nth-of-type(8),
	&:nth-of-type(16) {
		//margin-right: 0;
	}
	
	.fa {
		position: relative;
		width: 48px;
		height: 48px;
		font-size: 24px;
		color: white;
		text-align: center;
		line-height: 48px;
		z-index: 5;
	}
	
	&.rounded { 
		border-radius: 10px; 
		&.gradient {
			&:before {
				border-radius: 9px;
			}
		}
	}
	
	&.circle { 
		border-radius: 50%;
	}
	
	&.left-shaded {		
		&:before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 50%;
			height: 100%;
			background-color: rgba(black,0.1);
		}
		
		@keyframes width {
			0%   { width: 50%; }
			30%  { width: 5%; }
			50%  { width: 50%; }
			100% { width: 100%; }
		}
		
		&:hover {
			&:before {
				width: 100%;
				animation: width 250ms linear;
			}
		}
	}
	
	&.dia-shaded {
		overflow: hidden;
		&:before {
			position: absolute;
			content: '';
			top: -14px;
			left: 4px;
			width: 150%;
			height: 96%;
			background-color: rgba(black,0.1);
			transform: rotate(45deg);
			transition: all 250ms linear;
			z-index: 0;
		}
		
		i {
			z-index: 1;
		}
		
		&:hover {
			&:before {
				width: 150%;
				top: -20%;
				left: -20%;
				height: 150%;
			}
		}
	}
	
	&.gradient {
		overflow: hidden;
		//background: transparent;
		
		&:before {
			position: absolute;
			content: '';
			top: 2%;
			left: 2%;
			width: 96%;
			height: 98%;
			background: linear-gradient(to bottom, rgba(white,0.6), rgba(white,0.0));
			//transition: background 500ms ease;
			z-index: 0;
		}
	}

}
$apple: #777;
$codepen: #444;
$css3: #0270bb;
$dribbble: #ea4c89;
$github: #999;
$html5: #e54d26;
$instagram: #3d6b92;
$linkedin: #0177b5;
$paypal: #009cde;
$pinterest: #db242c;
$rss: #fc8f55;
$spotify: #84bd00;
$twitter: #55acee;
$wordpress: #1e8cbe;
$youtube: #d02022;

.long-shadow {
	
	&:before {
		position: absolute; 
		content: '';
		top: 50%;
		left: 50%;
		width: 70px;
		height: 70px;
		margin-top: -35px;
		margin-left: -35px;
		border-radius: 50%;
		opacity: 1;
		transform: scale(0);
		transition: transform 250ms linear;
		z-index: 0;
	}
	
	&:hover {
		//box-shadow: 0 0 10px rgba(black,0.4);

		&:before {
			transform: scale(1.0);
			opacity: 1;
		}
	}
}

.apple { 
	background: $apple; 

	&.long-shadow {
		
		&:before {
			background: shade($apple,15%);
		}
		
		i {
			@include textShadow(shade($apple,15%), 70, 'bottom-right');
		}
	}
}
.codepen { 
	background: $codepen; 
	
	&.long-shadow {
		
		&:before {
			background: shade($codepen,15%);
		}
		
		i {
			@include textShadow(shade($codepen,15%), 70, 'bottom-right');
		}
	}
}
.css3 { 
	background: $css3; 

	&.long-shadow {
		
		&:before {
			background: shade($css3,15%);
		}
		
		i {
			@include textShadow(shade($css3,15%), 70, 'bottom-right');
		}
	}
}
.dribbble { 
	background: $dribbble; 

	&.long-shadow {
		
		&:before {
			background: shade($dribbble,15%);
		}
		
		i {
			@include textShadow(shade($dribbble,15%), 70, 'bottom-right');
		}
	}
}
.github { 
	background: $github; 

	&.long-shadow {
		
		&:before {
			background: shade($github,15%);
		}
		
		i {
			@include textShadow(shade($github,15%), 70, 'bottom-right');
		}
	}
}
.html5 { 
	background: $html5; 

	&.long-shadow {
		
		&:before {
			background: shade($html5,15%);
		}
		
		i {
			@include textShadow(shade($html5,15%), 70, 'bottom-right');
		}
	}
}
.instagram { 
	background: $instagram; 

	&.long-shadow {
		
		&:before {
			background: shade($instagram,15%);
		}
		
		i {
			@include textShadow(shade($instagram,15%), 70, 'bottom-right');
		}
	}
}
.linkedin { 
	background: $linkedin; 

	&.long-shadow {
		
		&:before {
			background: shade($linkedin,15%);
		}
		
		i {
			@include textShadow(shade($linkedin,15%), 70, 'bottom-right');
		}
	}
}
.paypal { 
	background: $paypal; 

	&.long-shadow {
		
		&:before {
			background: shade($paypal,15%);
		}
		
		i {
			@include textShadow(shade($paypal,15%), 70, 'bottom-right');
		}
	}
}
.pinterest { 
	background: $pinterest; 

	&.long-shadow {
		
		&:before {
			background: shade($pinterest,15%);
		}
		
		i {
			@include textShadow(shade($pinterest,15%), 70, 'bottom-right');
		}
	}
}
.rss { 
	background: $rss; 

	&.long-shadow {
		
		&:before {
			background: shade($rss,15%);
		}
		
		i {
			@include textShadow(shade($rss,15%), 70, 'bottom-right');
		}
	}
}
.spotify { 
	background: $spotify; 

	&.long-shadow {
		
		&:before {
			background: shade($spotify,15%);
		}
		
		i {
			@include textShadow(shade($spotify,15%), 70, 'bottom-right');
		}
	}
}
.twitter { 
	background: $twitter; 

	&.long-shadow {
		
		&:before {
			background: shade($twitter,15%);
		}
		
		i {
			@include textShadow(shade($twitter,15%), 70, 'bottom-right');
		}
	}
}
.wordpress { 
	background: $wordpress; 

	&.long-shadow {
		
		&:before {
			background: shade($wordpress,15%);
		}
		
		i {
			@include textShadow(shade($wordpress,15%), 70, 'bottom-right');
		}
	}
}
.youtube, .youtube-play { 
	background: $youtube; 

	&.long-shadow {
		
		&:before {
			background: shade($youtube,15%);
		}
		
		i {
			@include textShadow(shade($youtube,15%), 70, 'bottom-right');
		}
	}
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console