_show/show.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="hover-ex.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="hover-min.css" media="screen" />
		<style>
			html {
				font-family: Arial, Charcoal, sans-serif;
				background: white-smoke;
			}
		
			a {
				background: #e1e1e1;
				color: black;
				padding: 1em 1.5em 1em 1.5em;
				margin: 1em;
				text-decoration: none;
				font-family: Helvetica;
			}
		
			
			div.icBtn {
				display: block;
				float: right;
				font-size:1.3em;
			}
			
			div.big {
				font-size:2em;
				margin-right: 5em;
			}
			
			hr {
				margin: 2em 0em 1em 0em;
				border: 0.1em solid whitesmoke;
			}
			
		</style>
	</head>
	
	<body>
		<h1>==Hover.css Framework Demo==</h1>
		<br>
		<h1> Information </h1>
		<ul>
			<li>On GitHub: https://ianlunn.github.io/Hover/</li>
			<li>License: MIT </li>
			<li>Free for: Personal application (can't sold) </li>
			<li>Commercial license: 14$ (one project) / 18$ (un. projects) </li>
			<li>Main author: Ian Lunn (UK)</li>
		</ul>
		<br>
		<br>
		<br>
		<br>
		
		<h1> Functionality </h1>
		<h2> Buttons 2D Transitions</h2>
		<a href="#" class="hvr-grow">Grow</a>
		<a href="#" class="hvr-pulse">Pulse</a>
		<a href="#" class="hvr-buzz">Buzz</a>
		<a href="#" class="hvr-push">Push</a>
		<a href="#" class="hvr-buzz hvr-pulse">Pulse</a>
		<hr>

		<h2> Icons</h2>
		<div class="big hvr-buzz" >↓</div>
		<div class="big hvr-pulse" >☼</div>
		<hr>

		<h2> Button with Icons</h2>
		<a href="#" class="hvr-icon-pulse">
			Pulse
			<div class="icBtn hvr-icon" >↓</div>
		</a>
		<div id="hoverex">
			<a href="#" class="hvr-icon-spin">
				Spin
				<div class="icBtn hvr-icon" >♂</div>
			</a>
		</div>
		<hr>


		<h2> Background Transitions </h2>
		<a href="#" class="hvr-fade">Fade</a>
		<a href="#" class="hvr-bounce-to-right" style="width:5em">Bounce</a>
		<hr>

		
		<h2> Button with Border</h2>
		<a href="#" class="hvr-border-fade">Border</a>
		<a href="#" class="hvr-ripple-out">Border</a>
		<a href="#" class="hvr-round-corners">Border</a>
		<hr>

		<h2> Shadow</h2>
		<a href="#" class="hvr-float-shadow">Shadow</a>
		<a href="#" class="hvr-shadow-radial">Shadow</a>
		<hr>
	<body>
</html>