mirror of https://github.com/IanLunn/Hover.git
134 lines
6.5 KiB
HTML
134 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hover.css</title>
|
|
<link href="css/demo-page.css" rel="stylesheet" media="all">
|
|
<link href="css/hover.css" rel="stylesheet" media="all">
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Hover.css</h1>
|
|
<p class="intro">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.<p>
|
|
|
|
<div class="aligncenter">
|
|
<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
|
|
</div>
|
|
|
|
<div id="effects">
|
|
|
|
<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>
|
|
|
|
|
|
<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="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>
|
|
|
|
</body>
|
|
</html> |