forked from IanLunn/Hover
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
153 lines (114 loc) · 7.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta property="og:image" content="http://ianlunn.github.io/Hover/hover.jpg" />
<meta property="og:site_name" content="Hover.css"/>
<meta property="og:title" content="Hover.css - A collection of CSS3 powered hover effects" />
<title>Hover.css - A collection of CSS3 powered hover effects</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>
<span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
<div class="aligncenter">
<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
<a class="tutorial" href="http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/">Read Tutorial</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="skew-backward" class="button skew-backward">Skew Backward</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-to-bottom-right" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
<a rel="wobble-to-top-right" class="button wobble-to-top-right">Wobble To Top Right</a>
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
<a rel="wobble-skew" class="button wobble-skew">Wobble Skew</a>
<a rel="buzz" class="button buzz">Buzz</a>
<a rel="buzz-out" class="button buzz-out">Buzz Out</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, <a href="https://github.com/IanLunn/Hover/wiki/Hacks-Explained">please read the FAQ</a>.</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">
<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>
<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>
<div class="social-button">
<a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">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>
<p>I tweet about web technologies such as CSS3, HTML5 and JavaScript</p>
<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>
</body>
</html>