forked from ubuwaits/css3-buttons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (147 loc) · 5.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 buttons 聚合</title>
<meta name="description" content="Yuguo的CSS3按钮聚合">
<link rel="stylesheet" href="stylesheets/buttons.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<h1>CSS3 buttons</h1>
<div class="project-info">
<div class="description">
<p>这是一个CSS3按钮的聚合页面。</p>
<p> 框架和一些初始的按钮来自于<a href="http://hellohappy.org/css3-buttons/">ubuwaits的开源代码</a>，然后<a href="http://yuguo.us">Yuguo</a>又实现了一些<a href="http://dribbble.com">dribbble</a>上的按钮设计。</p>
<p>原项目采用sass和<a href="http://github.com/thoughtbot/bourbon">Bourbon</a>开源框架生成css，个人不太喜欢这种方式，所以改写成了直接写CSS。</p>
</div>
<div class="info">
<ul>
<li><a href="http://hellohappy.org/css3-buttons/">ubuwaits的demo</a>.</li>
<li><a href="http://yuguo.us">Yuguo的主页</a>.</li>
<li><a href="http://github.com/yuguo/css3-buttons">watch this repo on GitHub</a></li>
</ul>
</div>
</div>
<div class="button-collection">
<div class="button-info">
<h2>Classic buttons</h2>
<p>This is the original set of buttons, showing a variety of CSS3 styles in different combinations. Study the code, then adjust to fit the context of where it's used.</p>
</div>
<ul class="column">
<li>
<button class="minimal">Minimal</button>
</li>
<li>
<button class="clean-gray">Clean Gray</button>
</li>
<li>
<button class="cupid-green">Cupid Green</button>
</li>
<li>
<button class="cupid-blue">Cupid Blue</button>
</li>
<li>
<button class="blue-pill">Blue Pill</button>
</li>
<li>
<button class="thoughtbot">thoughtbot</button>
</li>
<li>
<button class="punch">Punch</button>
</li>
<li>
<button class="purple-candy">Purple Candy</button>
</li>
<li>
<button class="shiny-blue">Shiny Blue</button>
</li>
<li>
<button class="download-itunes">Download iTunes</button>
</li>
<li>
<button class="skip">Skip</button>
</li>
<li>
<div class="indent"><button class="minimal-indent">Minimal Indent</button></div>
</li>
</ul>
</div>
<div class="button-collection">
<div class="button-info">
<h2>WebKit experimental</h2>
<p>Proof of concept buttons using WebKit-only features.</p>
</div>
<ul class="column">
<li>
<button class="webkit-badge">Quit!</button>
</li>
<li>
<button class="webkit-seal">Approve!</button>
</li>
<li>
<button class="webkit-check">Accept</button>
</li>
</ul>
</div>
<div class="button-collection">
<div class="button-info">
<h2>Chutzpah UI Design Kit </h2>
<p>原设计： <a href="http://dribbble.com/shots/98897-Chutzpah-UI-Design-Kit-free-button-resource">Morgan Allan Knutson</a>.</p>
</div>
<ul class="column">
<li>
<button class="morgan">Go Morgan!</button>
</li>
<li>
<button class="morgan-round">Go Morgan!</button>
</li>
</ul>
</div>
<div class="button-collection">
<div class="button-info">
<h2>Clean Home button</h2>
<p>原设计：<a href="http://dribbble.com/shots/306610-Clean-Home-button" title="">Clean Home button</a></p>
</div>
<ul class="column">
<li>
<button class="norm-round">Home</button>
</li>
<li>
<button class="norm-brick">Home</button>
</li>
</ul>
</div>
<div class="button-collection">
<div class="button-info">
<h2>Push Button + PSD</h2>
<p>原设计：<a href="http://dribbble.com/shots/292708-Push-Button-PSD" title="">Marian Mraz</a></p>
</div>
<ul class="column">
<li style="background:#ca462c;">
<button class="push">Push</button>
</li>
</ul>
</div>
<div class="button-collection">
<div class="button-info">
<h2>CSS3 UI Kit</h2>
<p>原设计：<a href="http://dribbble.com/shots/479550-CSS3-UI-Kit" title=""> Matt Gentile</a></p>
</div>
<ul class="column">
<li style="background-color: #f2f2f2;width:420px;">
<div class="nav-kit" style="margin-top: 60px;">
<a href="#" class="pagination-number">1</a>
<a href="#" class="pagination-number current">2</a>
<a href="#" class="pagination-number">3</a>
<a href="#" class="pagination-number dots">...</a>
<a href="#" class="pagination-number">10</a>
<a href="#" class="pagination-number next">Next</a>
</div><!-- .nav-kit -->
</li>
</ul>
</div>
<p class="credit">Maintained by <a href="http://yuguo.us/" >Yuguo</a>. <a href="http://github.com/yuguo/css3-buttons">watch this repo on GitHub</a>.</p>
</div>
</body>
</html>