Responsive Share Button Expander

share-button-expander.html

<!-- Share Button -->
			<div class="share-button">
				
				<i class="fa fa-share-alt"></i>
			    
			    <div class="tooltip">
			        <li>
			        	<i class="fa fa-facebook-official"></i>
			        </li>
			        <li>
			        	<i class="fa fa-twitter"></i>
			        </li>
			        <li>
			        	<i class="fa fa-tumblr"></i>
			        </li>
			        <li>
			        	<i class="fa fa-google-plus"></i>
			        </li>
			    </div>
			</div>

share-button-expander.scss

// ----
// libsass (v3.2.5)
// ----

// Author: Nick Wittwer
// Author URL: http://nickwittwer.com
// Inspiration: http://jameschambers.co/writing/sequenced-animation/

@import "bourbon/bourbon";

// Share button variables
$share-button-size: 1rem;
$share-button-bg: #ececec;
$share-button-bg-hover: darken($share-button-bg, 10%);
$share-button-animation-duration: 0.15s;

// Animation keyframes;

@include keyframes(fadeIn) {
	from {
		@include transform( translateY($share-button-size / 2) );
		opacity: 0;
	}
	to {
		@include transform( translateY(0) );
		opacity: 1;
	}
}

// Animation mixin

@mixin animation--fadedown($delay) {
	@include animation(fadeIn 0.3s ease-in-out);
	@include animation-iteration-count(1);
	@include animation-fill-mode(forwards);
	@include animation-delay(#{$delay}s);
}


/* Share button + tooltip */
.share-button {
	text-transform: uppercase;
	background: $share-button-bg;
	color: #555;
	font-size: $share-button-size;
	line-height: 0;
	margin: 150px auto;
	padding: $share-button-size;
	position: relative;
	text-align: center;
	width: $share-button-size;
	height: $share-button-size;
	-webkit-transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
	transition: all $share-button-animation-duration ease-in-out;
}

.tooltip {
	background: darken($share-button-bg, 10%);
	// box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.40);
	// border-radius: 3px;
	bottom: 100%;
	color: #fff;
	display: block;
    opacity: 0; // hidden until hover
    padding: 0 $share-button-size;
    pointer-events: none;
    position: absolute;
    text-align: center;
    width: $share-button-size;
    margin-bottom: 0; // distance from tooltip
    margin-left: -$share-button-size;
    transform: translateY(10px);
    transition: all $share-button-animation-duration cubic-bezier(0,0.53,1,1);
    // overflow: hidden;
   
    &::after {
    	content: "";
    	position: absolute;
    	width: 0;
    	height: 0;
    	bottom: -0.55rem;
    	left: 1.35rem;
    	box-sizing: border-box;
    	border: .25rem solid black;
    	border-color: transparent transparent $share-button-bg-hover $share-button-bg-hover;
    	transform-origin: 0 0;
    	transform: rotate(-225deg);
    	box-shadow: -1px 1px 0px 0 darken($share-button-bg, 20%);
    }

	li {
		display: block;
		opacity: 0;
		width: 2rem;
		min-height: $share-button-size;
		padding: .5rem;
		font-size: $share-button-size;
		position: relative;
		text-align: center;
		margin-left: -1rem;
		border-bottom: 1px solid darken($share-button-bg, 20%); 
		transition: all $share-button-animation-duration ease-out;

		&:hover {
			background: darken($share-button-bg, 20%);
		}

			i {
				text-align: center;
				width: 100%;
			}
	}
}


// Show the tooltip on hover 
.share-button:hover {
	background: $share-button-bg-hover;

	.tooltip {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0px);
			
			li {

				// Sequentially animate icon fade in
				// Reverse the order icons are faded in (bottom to top)

				$children: 4; // # of icons
				$num: -40;
				@while $children > 0 {
				
					&:nth-child(#{$children}) {
						@include animation--fadedown( $children / $num ); // (delay amount)
					}

					$children: $children - 1; // update the $children variable

				} // end while 

			}
	}
}