A Pen by Ian Lunn.

Hover.css.markdown

Hover.css

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS

A Pen by Ian Lunn on CodePen.

License.

index.html

<span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
<h1>Hover.css</h1>
<h2>2D Transforms</h2>

			<a rel="grow" class="button grow">Grow</a>
			<a rel="shrink" class="button shrink">Shrink</a>
			<a rel="pulse" class="button pulse">Pulse</a>
			<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
			<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
			<a rel="push" class="button push">Push</a>
			<a rel="pop" class="button pop">Pop</a>
			<a rel="rotate" class="button rotate">Rotate</a>
			<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
			<a rel="float" class="button float">Float</a>
			<a rel="sink" class="button sink">Sink</a>
			<a rel="hover" class="button hover">Hover</a>
			<a rel="hang" class="button hang">Hang</a>
			<a rel="skew" class="button skew">Skew</a>
			<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
			<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
			<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
			<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
			<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
			


			<h2>Border Transitions</h2>

			<a rel="border-fade" class="button border-fade">Border Fade</a>
			<a rel="hollow" class="button hollow">Hollow</a>
			<a rel="trim" class="button trim">Trim</a>
			<a rel="outline-outward" class="button outline-outward">Outline Outward</a>
			<a rel="outline-inward" class="button outline-inward">Outline Inward</a>
			<a rel="round-corners" class="button round-corners">Round Corners</a>
			


			<h2>Shadow and Glow Transitions</h2>

			<a rel="glow" class="button glow">Glow</a>
			<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>
			<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>
			<a rel="float-shadow" class="button float-shadow">Float Shadow</a>
			<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>
			<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>
			


			<h2>Speech Bubbles</h2>
			
			<a rel="bubble-top" class="button bubble-top">Bubble Top</a>
			<a rel="bubble-right" class="button bubble-right">Bubble Right</a>
			<a rel="bubble-bottom" class="button bubble-bottom">Bubble Bottom</a>
			<a rel="bubble-left" class="button bubble-left">Bubble Left</a>
			<a rel="bubble-float-top" class="button bubble-float-top">Bubble Float Top</a>
			<a rel="bubble-float-right" class="button bubble-float-right">Bubble Float Right</a>
			<a rel="bubble-float-bottom" class="button bubble-float-bottom">Bubble Float Bottom</a>
			<a rel="bubble-float-left" class="button bubble-float-left">Bubble Float Left</a>
			


			<h2>Curls</h2>

			<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>
			<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>
			<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>
			<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>

<div class="aligncenter">
			<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
		</div>

<div class="footer">
			<div class="about">
				<h2>About Hover.css</h2>

				<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours.</p>

				<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ.</p>

				<p>Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.</p>

				<h3>License</h3>

				<p>hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.

				<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
			</div>

			<div class="social aligncenter">
				<div class="social-button">
					<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
				</div>

				<div class="social-button">
					<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
				</div>

				<div class="social-button">
					<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
				</div>

				<div class="social-button">
					<a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @IanLunn</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
				</div>
			</div>

			<div class="author">
				<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hover" src="http://ianlunn.github.io/Hover/logo-transparent.png" width="60" height="60" /></a>
				<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn</a> - Front End Web Developer</p>
			</div>

		</div>

		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-11991680-4', 'ianlunn.github.io');
		  ga('send', 'pageview');
		</script>

style.scss

@import "compass";
/*
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */


// Default options
$defaultDuration: .3s;
$primaryColour: #ececec;
$secondaryColour: #666;
$shadowColour: rgba(0, 0, 0, .6);



// As is often the case, some devices/browsers need additional code to get CSS to work
// in the most desired way. These mixins are used to quickly drop in hacks for each element
@mixin hideTapHighlightColor() {
	//Prevent highlight colour when element is tapped
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@mixin hardwareAccel() {
	//Improve performance on mobile/tablet devices
	transform: translateZ(0);
}

@mixin improveAntiAlias() {
	//Improve aliasing on mobile/tablet devices
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}



/* Default styles for the demo buttons */
.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: $primaryColour;
  text-decoration: none;
  color: $secondaryColour;
}


/* 2D TRANSITIONS */

/* Grow */
.grow {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: scale(1.1);
	}
}


/* Shrink */
.shrink {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: scale(.9);
	}
}


/* Pulse */
@keyframes pulse {
	25% {
		transform: scale(1.1);
	}

	75% {
		transform: scale(.9);
	}
}

.pulse {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: pulse;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
}


/* Pulse Grow */
@keyframes pulse-grow {
	to {
		transform: scale(1.1);
	}
}

.pulse-grow {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: pulse-grow;
		animation-duration: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
}


/* Pulse Shrink */
@keyframes pulse-shrink {
	to {
		transform: scale(.9);
	}
}

.pulse-shrink {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: pulse-shrink;
		animation-duration: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
}


/* Push */
@keyframes push {
	50% {
		transform: scale(.8);
	}

	100% {
		transform: scale(1);
	}
}

.push {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: push;
		animation-duration: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: 1;
	}
}


/* Pop */
@keyframes pop {
	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

.pop {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: pop;
		animation-duration: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: 1;
	}
}


/* Rotate */
.rotate {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();
	
	&:hover {	
		transform: rotate(4deg);
	}
}


/* Grow Rotate */
.grow-rotate {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();
	
	&:hover {	
		transform: scale(1.1) rotate(4deg);
	}
}


/* Float */
.float {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: translateY(-5px);
	}
}


/* Sink */
.sink {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: translateY(5px);
	}
}


/* Hover */
@keyframes hover {
	50% {
		transform: translateY(-3px);
	}

	100% {
		transform: translateY(-6px);
	}
}

.hover {
	display: inline-block;
	transition-duration: .5s;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: translateY(-6px);
		animation-name: hover;
		animation-duration: 1.5s;
		animation-delay: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
}


/* Hang */
@keyframes hang {
	50% {
		transform: translateY(3px);
	}

	100% {
		transform: translateY(6px);
	}
}

.hang {
	display: inline-block;
	transition-duration: .5s;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: translateY(6px);
		animation-name: hang;
		animation-duration: 1.5s;
		animation-delay: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
}


/* Skew */
.skew {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: skew(-10deg);
	}
}


/* Skew Forward */
.skew-forward {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: transform;
	transform-origin: 0 100%;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		transform: skew(-10deg);
	}
}


/* Wobble Vertical */
@keyframes wobble-vertical {
	16.65% {
		transform: translateY(8px);
	}

	33.3% {
		transform: translateY(-6px);
	}

	49.95% {
		transform: translateY(4px);
	}

	66.6% {
		transform: translateY(-2px);
	}

	83.25% {
		transform: translateY(1px);
	}

	100% {
		transform: translateY(0);
	}
}

.wobble-vertical {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: wobble-vertical;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
	}
}


/* Wobble Horizontal */
@keyframes wobble-horizontal {
	16.65% {
		transform: translateX(8px);
	}

	33.3% {
		transform: translateX(-6px);
	}

	49.95% {
		transform: translateX(4px);
	}

	66.6% {
		transform: translateX(-2px);
	}

	83.25% {
		transform: translateX(1px);
	}

	100% {
		transform: translateX(0);
	}
}

.wobble-horizontal {
	display: inline-block;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: wobble-horizontal;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
	}
}


/* Wobble Top */
@keyframes wobble-top {
	16.65% {
		transform: skew(-12deg);
	}

	33.3% {
		transform: skew(10deg);
	}

	49.95% {
		transform: skew(-6deg);
	}

	66.6% {
		transform: skew(4deg);
	}

	83.25% {
		transform: skew(-2deg);
	}

	100% {
		transform: skew(0);
	}
}

.wobble-top {
	display: inline-block;
	transform-origin: 0 100%;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: wobble-top;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
	}
}


/* Wobble Bottom */
@keyframes wobble-bottom {
	16.65% {
		transform: skew(-12deg);
	}

	33.3% {
		transform: skew(10deg);
	}

	49.95% {
		transform: skew(-6deg);
	}

	66.6% {
		transform: skew(4deg);
	}

	83.25% {
		transform: skew(-2deg);
	}

	100% {
		transform: skew(0);
	}
}

.wobble-bottom {
	display: inline-block;
	transform-origin: 100% 0;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		animation-name: wobble-bottom;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
	}
}




/* BORDER TRANSITIONS */

/* Border Fade */
.border-fade {
	display: inline-block;
	$borderWidth: 4px;

	transition-duration: $defaultDuration;
	transition-property: box-shadow;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	box-shadow: 
			inset 0 0 0 $borderWidth $primaryColour,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 
	
	&:hover {
		box-shadow: 
			inset 0 0 0 $borderWidth $secondaryColour,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


/* Hollow */
.hollow {
	display: inline-block;
	$borderWidth: 4px;

	transition-duration: $defaultDuration;
	transition-property: background;

	transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */
	box-shadow: 
		inset 0 0 0 $borderWidth $primaryColour,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover {
		background: none;
	}
}


/* Trim */
.trim {
	display: inline-block;
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		content: '';
		position: absolute;
		border: white solid $innerBorderWidth;
		top: $outerBorderWidth;
		left: $outerBorderWidth;
		right: $outerBorderWidth;
		bottom: $outerBorderWidth;
		opacity: 0;
		transition-duration: $defaultDuration;
		transition-property: opacity;
	}

	&:hover:before {
		opacity: 1;
	}
}


/* Outline Outward */
.outline-outward {
	display: inline-block;
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		content: '';
		position: absolute;
		border: $primaryColour solid $outerBorderWidth;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition-duration: .3s;
		transition-property: top right bottom left;
	}

	&:hover:before {
		top: -($outerBorderWidth + $innerBorderWidth);
		right: -($outerBorderWidth + $innerBorderWidth);
		bottom: -($outerBorderWidth + $innerBorderWidth);
		left: -($outerBorderWidth + $innerBorderWidth);
	}
}


/* Outline Inward */
.outline-inward {
	display: inline-block;
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		content: '';
		position: absolute;
		border: $primaryColour solid $outerBorderWidth;
		top: -($outerBorderWidth + $innerBorderWidth) * 2;
		right: -($outerBorderWidth + $innerBorderWidth) * 2;
		bottom: -($outerBorderWidth + $innerBorderWidth) * 2;
		left: -($outerBorderWidth + $innerBorderWidth) * 2;
		opacity: 0;
		transition-duration: .3s;
		transition-property: top right bottom left;
	}

	&:hover:before {
		top: -($outerBorderWidth + $innerBorderWidth);
		right: -($outerBorderWidth + $innerBorderWidth);
		bottom: -($outerBorderWidth + $innerBorderWidth);
		left: -($outerBorderWidth + $innerBorderWidth);
		opacity: 1;
	}
}


/* Round Corners */
.round-corners {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: border-radius;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		border-radius: 1em;
	}
}




/* SHADOW/GLOW TRANSITIONS */

/* Glow */
.glow {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: box-shadow;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		box-shadow: 0 0 8px $shadowColour;
	}
}


/* Box Shadow Outset */
.box-shadow-outset {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: box-shadow;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:hover {
		box-shadow: 2px 2px 2px $shadowColour;
	}
}


/* Box Shadow Inset */
.box-shadow-inset {
	display: inline-block;
	transition-duration: $defaultDuration;
	transition-property: box-shadow;

	box-shadow: inset 0 0 0 $shadowColour,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	@include hideTapHighlightColor();
	@include hardwareAccel();

	&:hover {
		box-shadow: inset 2px 2px 2px $shadowColour,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


/* Float Shadow */
.float-shadow {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
	  position: absolute;
	  z-index: -1;
	  content: '';
	  top: 100%;
	  left: 5%;
	  height: 10px;
	  width: 90%;
	  opacity: 0;
	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
		transition-duration: $defaultDuration;
		transition-property: transform opacity;
	}

	&:hover {
		transform: translateY(-5px); /* move the element up by 5px */

		&:before {
			opacity: 1;
			transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
		}
	}
}


/* Hover Shadow */
@keyframes hover {
	50% {
		transform: translateY(-3px);
	}

	100% {
		transform: translateY(-6px);
	}
}

@keyframes hover-shadow {
	0% {
		transform: translateY(6px);
		opacity: .4;
	}

	50% {
		transform: translateY(3px);
		opacity: 1;
	}


	100% {
		transform: translateY(6px);
		opacity: .4;
	}
}

.hover-shadow {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
	  position: absolute;
	  z-index: -1;
	  content: '';
	  top: 100%;
	  left: 5%;
	  height: 10px;
	  width: 90%;
	  opacity: 0;
	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
		transition-duration: $defaultDuration;
		transition-property: transform opacity;
	}

	&:hover {
		transform: translateY(-6px);
		animation-name: hover;
		animation-duration: 1.5s;
		animation-delay: $defaultDuration;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;

		&:before {
			opacity: .4;
			transform: translateY(6px);
			animation-name: hover-shadow;
			animation-duration: 1.5s;
			animation-delay: .3s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
	}
}


/* Shadow Radial */
.shadow-radial {
	display: inline-block;
	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before,
	&:after {
		pointer-events: none;
		position: absolute;
		content: '';
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    transition-duration: $defaultDuration;
    transition-property: opacity;
	}

	&:before {
		bottom: 100%;
    background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:after {
		top: 100%;
		background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:hover:before,
	&:hover:after {
		opacity: 1;
	}
}



/* SPEECH BUBBLES */

$tipWidth: 10px;  //the width of the speech bubble tip
$tipHeight: 10px; //the height of the speech bubble tip
$tipColour: $primaryColour;

/* Bubble Top */
.bubble-top {
	display: inline-block;
	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		transition-duration: $defaultDuration;
		left: calc(50% - #{$tipWidth});
		border-width: 0 $tipWidth $tipHeight $tipWidth;
		border-color: transparent transparent $tipColour transparent;
		transition-property: top;
	}

	&:hover:before {
		top: -($tipHeight);
	}
}


/* Bubble Right */
.bubble-right {
	display: inline-block;
	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		transition-duration: $defaultDuration;
		transition-property: right;
		top: calc(50% - #{$tipHeight});
		right: 0;
		border-width: $tipHeight 0 $tipHeight $tipWidth;
		border-color: transparent transparent transparent $tipColour ;
	}

	&:hover:before {
		right: -($tipWidth);
	}
}


/* Bubble Bottom */
.bubble-bottom {
	display: inline-block;
	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		transition-duration: $defaultDuration;
		transition-property: bottom;
		left: calc(50% - #{$tipWidth});
		bottom: 0;
		border-width: $tipHeight $tipWidth 0 $tipWidth;
		border-color: $tipColour transparent transparent transparent;
	}

	&:hover:before {
		bottom: -($tipHeight);
	}	
}


/* Bubble Left */
.bubble-left {
	display: inline-block;
	position: relative;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		transition-duration: $defaultDuration;
		transition-property: left;
		top: calc(50% - #{$tipHeight});
		left: 0;
		border-width: $tipHeight $tipWidth $tipHeight 0;
		border-color: transparent $tipColour transparent transparent;
	}

	&:hover:before {
		left: -($tipWidth);
	}
}


/* Bubble Float Top */
.bubble-float-top {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(50% - #{$tipWidth});
		top: 0;
		border-style: solid;
		border-width: 0 $tipWidth $tipHeight $tipWidth;
		border-color: transparent transparent $tipColour transparent;
		transition-duration: $defaultDuration;
		transition-property: top;
	}


	&:hover {
		transform: translateY(5px) translateZ(0);
	}

	&:hover:before {
		top: -($tipHeight);
	}
}

/* Bubble Float Right */
.bubble-float-right {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		top: calc(50% - #{$tipHeight});
		right: 0;
		content: '';
		border-style: solid;
		border-width: $tipHeight 0 $tipHeight $tipWidth;
		border-color: transparent transparent transparent $tipColour;
		transition-duration: $defaultDuration;
		transition-property: right;
	}

	&:hover {
		transform: translateX(-5px);
	}

	&:hover:before {
		right: -($tipWidth);
	}
}


/* Bubble Float Bottom */
.bubble-float-bottom {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(50% - #{$tipWidth});
		bottom: 0;
		border-style: solid;
		border-width: $tipHeight $tipWidth 0 $tipWidth;
		border-color: $tipColour transparent transparent transparent;
		transition-duration: $defaultDuration;
		transition-property: bottom;
	}

	&:hover {
		transform: translateY(-5px) translateZ(0);
	}

	&:hover:before {
		bottom: -($tipHeight);
	}
}


/* Bubble Float Left */
.bubble-float-left {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		top: calc(50% - #{$tipHeight});
		left: 0;
		border-style: solid;
		border-width: $tipHeight $tipWidth $tipHeight 0;
		border-color: transparent $tipColour transparent transparent;
		transition-duration: $defaultDuration;
		transition-property: left;
	}

	&:hover {
		transform: translateX(5px);
	}

	&:hover:before {
		left: -($tipWidth);
	}
}



/* CURLS */

// Curl dimensions
$curlWidth: 25px;
$curlHeight: 25px;

// Curl colours
$revealAreaColour: white;			// reveal area behind the curl
$curlLineColour: #aaa;				// crease line
$curlTransitionColour: #ccc;	// colour transitioning from crease line to final colour
$curlLastColour: white;				// final colour of the back of the curl


/* Curl Top Left */
.curl-top-left {
	display: inline-block;
	position: relative;
	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		left: 0;
		background: $revealAreaColour; /* IE9 */
		background: linear-gradient(
			135deg, 
			$revealAreaColour 45%,
			$curlLineColour 50%,		
			$curlTransitionColour 56%,		
			$curlLastColour 80%   
		);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

		z-index: 1000;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
		transition-duration: $defaultDuration;
		transition-property: width height;
	}

	&:hover:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


/* Curl Top Right */
.curl-top-right {
	display: inline-block;
	position: relative;
	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		right: 0;
		background: $revealAreaColour; /* IE9 */
		background: linear-gradient(
			225deg, 
			$revealAreaColour 45%,
			$curlLineColour 50%,		
			$curlTransitionColour 56%,		
			$curlLastColour 80%   
		);
		box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
		transition-duration: $defaultDuration;
		transition-property: width height;
	}

	&:hover:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


/* Curl Bottom Right */
.curl-bottom-right {
	display: inline-block;
	position: relative;
	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		right: 0;
		background: $revealAreaColour; /* IE9 */
		background: linear-gradient(
			315deg, 
			$revealAreaColour 45%,
			$curlLineColour 50%,		
			$curlTransitionColour 56%,		
			$curlLastColour 80%   
		);
		box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
		transition-duration: $defaultDuration;
		transition-property: width height;
	}

	&:hover:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}



/* Curl Bottom Left */
.curl-bottom-left {
	display: inline-block;
	position: relative;
	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		left: 0;
		background: $revealAreaColour; /* IE9 */
		background: linear-gradient(
			45deg, 
			$revealAreaColour 45%,
			$curlLineColour 50%,		
			$curlTransitionColour 56%,		
			$curlLastColour 80%   
		);
		box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
		transition-duration: $defaultDuration;
		transition-property: width height;
	}

	&:hover:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}




#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#060;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}