forked from gr2m/awesome-buttons
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
213 lines (188 loc) · 7.08 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Even More Awesome Buttons</title>
<meta http-equiv="Content-Language" content="en-us" />
<link href="awesome-buttons.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
/* awesome buttons extensions */
.awesome.blue {
background-color: #0A50FF !important;
}
.awesome.red {
background-color: #e33100 !important;
}
.awesome.green {
background-color: #3ACC00 !important;
}
.awesome.small { padding: 4px 7px 5px !important; font-size: 10px !important; }
.awesome.small:active { padding: 5px 7px 4px !important; }
.awesome.large { padding: 8px 14px 9px !important; font-size: 14px !important; }
.awesome.large:active { padding: 9px 14px 8px !important; }
/* demo page styling */
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
color: #111;
font-family: arial;
}
#wrapper {
width: 960px;
margin: 20px auto;
}
h1 {
font-size: 2em;
font-weight: normal;
margin: 0;
padding: 1em 0 1px;
background: #222;
color: #FFF;
}
h1 .center {
display: block;
width: 960px;
margin: 0 auto 1em;
text-align: center;
}
h1 a {
color: #FFF;
}
h1 small {
font-size: .4em;
}
h2 {
margin: 2em 0 0;
text-align: center;
border-bottom: 2px solid #111;
}
a {
color: #111;
}
p {
padding: .3em 0;
text-align: center;
}
.light, .dark {
text-align: center;
padding: 2em 0 1em;
}
.light {
float: left;
width: 49.9%;
}
.dark {
float: right;
width: 49.9%;
color: #FFF;
background: #222;
}
.normal-hover-active {
padding: .5em 0;
}
.normal-hover-active p {
text-align: center;
position: relative;
}
.normal-hover-active.dark {
width: 100%;
float: none;
}
</style>
<script type="text/javascript" charset="utf-8">
awesome_buttons = awesome_links = [
['now I\'m awesome', 'awesome medium button'],
['wow, huge!', 'awesome large button'],
['small but awesome', 'awesome small button'],
['so much color', 'awesome green button'],
['end even more', 'awesome blue button'],
['I could do it all day long', 'awesome huge red button'],
['Let\'s do it again!', '']
]
awesome_buttons_index = awesome_links_index = 0
function awesome_button(o) {
o.value = awesome_buttons[awesome_buttons_index][0]
o.className = awesome_buttons[awesome_buttons_index][1]
awesome_buttons_index++
if (awesome_buttons_index == awesome_buttons.length) awesome_buttons_index = 0
return false
}
function awesome_link(o) {
o.innerHTML = awesome_buttons[awesome_links_index][0]
o.className = awesome_links[awesome_links_index][1]
awesome_links_index++
if (awesome_links_index == awesome_links.length) awesome_links_index = 0
return false
}
</script>
</head>
<body>
<h1>
<span class="center">Even More Awesome Buttons <small>(based on <a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba">Super Awesome Buttons with CSS3 and RGBA</a> by <a href="http://www.zurb.com">ZERB</a>)</small></span>
</h1>
<div id="wrapper">
<p>
In addition to <a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba">the original from ZERB</a>,
we have an awesome mouseover and clicked state - with css and one graphic only!<br />
Just click this button and the link and see for yourself! And <a href="http://www.elctech.com/core/make-your-buttons-look-super-awesome">let us know what you think!</a>
</p>
<p style="margin-top: 2em">
<input type="button" name="some_name" value="I'm just a button - Click me" onclick="return awesome_button(this)"> | <a href="#" onclick="return awesome_link(this)">I'm just a link - Click me</a>
</p>
<h2>with simple hex Colors</h2>
<div class="light">
<p>default (#111)</p>
<p><a class="awesome small button">Super Awesome Button</a></p>
<p><a class="awesome medium button">Super Awesome Button</a></p>
<p><a class="awesome large button">Super Awesome Button</a></p>
</div>
<div class="dark">
<p>default (#111)</p>
<p><a class="awesome large button">Super Awesome Button</a></p>
<p><a class="awesome medium button">Super Awesome Button</a></p>
<p><a class="awesome small button">Super Awesome Button</a></p>
</div>
<div class="light">
<p>#0A50FF</p>
<p><a class="awesome small blue button">Super Awesome Button</a></p>
<p><a class="awesome medium blue button">Super Awesome Button</a></p>
<p><a class="awesome large blue button">Super Awesome Button</a></p>
</div>
<div class="dark">
<p>#0A50FF</p>
<p><a class="awesome large blue button">Super Awesome Button</a></p>
<p><a class="awesome medium blue button">Super Awesome Button</a></p>
<p><a class="awesome small blue button">Super Awesome Button</a></p>
</div>
<div class="light">
<p>#E33100</p>
<p><a class="awesome small red button">Super Awesome Button</a></p>
<p><a class="awesome medium red button">Super Awesome Button</a></p>
<p><a class="awesome large red button">Super Awesome Button</a></p>
</div>
<div class="dark">
<p>#E33100</p>
<p><a class="awesome large red button">Super Awesome Button</a></p>
<p><a class="awesome medium red button">Super Awesome Button</a></p>
<p><a class="awesome small red button">Super Awesome Button</a></p>
</div>
<div class="light">
<p>#3ACC00</p>
<p><a class="awesome small green button">Super Awesome Button</a></p>
<p><a class="awesome medium green button">Super Awesome Button</a></p>
<p><a class="awesome large green button">Super Awesome Button</a></p>
</div>
<div class="dark">
<p>#3ACC00</p>
<p><a class="awesome large green button">Super Awesome Button</a></p>
<p><a class="awesome medium green button">Super Awesome Button</a></p>
<p><a class="awesome small green button">Super Awesome Button</a></p>
</div>
</div>
<!-- fork me ribbon! -->
<a href="http://github.com/gr2m/awesome-buttons"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
</body>
</html>