Saved!

Unnamed Sheet - 8h4881gd - 8h4881gd

HTML CSS JavaScript Frontend Development

  
  <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="https://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="https://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hover" src="https://ianlunn.github.io/Hover/logo-transparent.png" width="60" height="60" /></a>
				<p class="credit">Created by <a href="https://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>    
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js