-
Notifications
You must be signed in to change notification settings - Fork 0
/
button.html
268 lines (257 loc) · 9.99 KB
/
button.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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<script src="script.js"></script>
<title>Whois Kp</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<hr>
<button class="ui button primary">Khoa Pham</button>
<button class="ui button">Cancel</button>
<button class="ui button secondary">OK</button>
<div class="ui divider"></div>
<button class="ui button secondary animated" tabindex="0">
<div class="visible content">Next</div>
<div class="hidden content"><i class="right arrow icon"></i></div>
</button>
<div class="ui vertical animated button" tabindex="0">
<div class="hidden content">Shop</div>
<div class="visible content"><i class="shop icon"></i></div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">$12.99 a month</div>
</div>
<div class="ui divider"></div>
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i>Whois Kp</div>
<a href="" class="ui basic label">2,048</a>
</div>
<div class="ui left labeled button" tabindex="0">
<a href="" class="ui basic red right pointing label">2,048</a>
<div class="ui button red label">
<i class="heart icon"></i>Like</div>
</div>
<div class="ui left labeled button" tabindex="0">
<a href="" class="ui basic label">2,048</a>
<div class="ui icon button"><i class="fork icon">
</i></div>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui blue button basic">
<i class="fork icon"></i> Forks
</div>
<a class="ui left pointing blue label basic">
1,048
</a>
</div>
<div class="ui divider"></div>
<button class="ui labeled icon button"><i class="pause icon"></i>Pause</button>
<button class="ui right labeled icon button basic"><i class="right arrow icon"></i>Next</button>
<button class="ui red basic button">RED</button>
<button class="ui blue button">Blue</button>
<button class="ui positive basic button">Positive</button>
<button class="ui positive button">Positive</button>
<button class="ui negative basic button">Negative</button>
<div class="ui divider"></div>
<div class="ui inverted segment">
WhoisKp
<button class="ui inverted blue button"> Ahihi</button>
<button class="ui inverted red button">Ahihi</button>
</div>
<div style="background-color: #ff0" class="ui buttons">
<button class="ui inverted red button">Ahihi</button>
<button class="ui red button">Ahihi</button>
<button class="ui basic red button">Ahihi</button>
</div>
<div class="ui buttons">
<button class="ui left attached button">Left</button>
<button class="ui inverted red button">Ahihi</button>
<button class="ui green button">Ahihi</button>
<button class="ui blue button">Ahihi</button>
<button class="right attached ui button">Right</button>
</div>
<div class="ui icon buttons">
<button class="ui button"><i class="align left icon"></i></button>
<button class="ui button"><i class="align center icon"></i></button>
<button class="ui button"><i class="align right icon"></i></button>
<button class="ui button"><i class="align justify icon"></i></button>
</div>
<div class="ui icon buttons">
<button class="ui button"><i class="bold icon"></i></button>
<button class="ui button"><i class="underline icon"></i></button>
<button class="ui button"><i class="text width icon"></i></button>
</div>
<div class="ui buttons">
<button class="ui button">un</button>
<div class="or" data-text=""></div>
<button class="ui positive button">deux</button>
</div>
<div class="ui buttons">
<button class="ui positive button">un</button>
<div class="or"></div>
<button class="ui negative button">deux</button>
</div>
<div class="ui divider"></div>
<div class="ui red"><b>Loading</b></div>
<button class="ui loading button">Loading</button>
<button class="ui basic loading button">Loading</button>
<button class="ui primary loading button">Loading</button>
<button class="ui secondary loading button">Loading</button>
<button class="ui facebook button">
<i class="facebook icon"></i> Facebook
</button>
<button class="ui twitter button">
<i class="twitter icon"></i> Twitter
</button>
<button class="ui google plus button">
<i class="google plus icon"></i> Google Plus
</button>
<button class="ui vk button">
<i class="vk icon"></i> VK
</button>
<button class="ui linkedin button">
<i class="linkedin icon"></i> LinkedIn
</button>
<button class="ui instagram button">
<i class="instagram icon"></i> Instagram
</button>
<button class="ui youtube button">
<i class="youtube icon"></i> YouTube
</button>
<button class="mini ui button">
Mini
</button>
<button class="tiny ui button">
Tiny
</button>
<button class="small ui button">
Small
</button>
<button class="medium ui button">
Medium
</button>
<button class="large ui button">
Large
</button>
<button class="big ui button">
Big
</button>
<button class="huge ui button">
Huge
</button>
<button class="massive ui button">
Massive
</button>
<button class="compact ui button">
Hold
</button>
<button class="ui compact icon button">
<i class="pause icon"></i>
</button>
<button class="ui compact labeled icon button">
<i class="pause icon"></i> Pause
</button>
<button class="ui toggle button">Vote</button>
<div class="ui divider"></div>
<button class="fluid ui button">Fits container</button>
<div class="ui divider"></div>
<button class="circular ui icon button">
<i class="icon settings"></i>
</button>
<button class="ui circular facebook icon button">
<i class="facebook icon"></i>
</button>
<button class="ui circular twitter icon button">
<i class="twitter icon"></i>
</button>
<button class="ui circular linkedin icon button">
<i class="linkedin icon"></i>
</button>
<button class="ui circular google plus icon button">
<i class="google plus icon"></i>
</button>
<div class="ui divider"></div>
<div class="ui top attached button" tabindex="0">Top</div>
<div class="ui attached segment">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, adipisci, quibusdam, labore, sapiente animi provident voluptatum doloremque dolorum sint tenetur eveniet porro repudiandae amet aliquid ab. Doloribus, assumenda, perferendis minima eligendi
incidunt qui modi odit sequi quam nisi quasi iure labore dolore temporibus ratione saepe nihil! Molestias, nulla temporibus at ipsam ex vel voluptatem hic dolorum. Ut, numquam exercitationem esse rem nulla voluptatum quisquam neque nesciunt ullam
ipsam quis laudantium consequuntur autem dolorem aperiam ratione totam. Deserunt, non nam ratione laboriosam deleniti dignissimos in ipsum impedit qui sunt. Accusantium, ut, non, sint a quisquam consectetur aut fuga dolorum maiores vero quidem unde
sapiente perspiciatis blanditiis totam recusandae quaerat? Quas, magni, delectus obcaecati doloribus quisquam cumque autem quae impedit amet similique sint vero velit.
</div>
<div class="ui bottom attached button" tabindex="0">Bottom</div>
<div class="ui divider"></div>
<div class="ui two top attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
<div class="ui attached segment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, libero, quia commodi ipsa maxime labore reiciendis sit sint animi et placeat ratione eius accusamus incidunt consequuntur aliquid aperiam enim totam.</p>
</div>
<div class="ui two bottom attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
<div class="ui divider"></div>
<div class="ui vertical buttons">
<button class="ui button">Feed</button>
<button class="ui button">Messages</button>
<button class="ui button">Events</button>
<button class="ui button">Photos</button>
</div>
<div class="ui vertical labeled icon buttons">
<button class="ui button">
<i class="pause icon"></i> Pause
</button>
<button class="ui button">
<i class="play icon"></i> Play
</button>
<button class="ui button">
<i class="shuffle icon"></i> Shuffle
</button>
</div>
<div class="ui buttons">
<button class="ui labeled icon button">
<i class="left chevron icon"></i> Back
</button>
<button class="ui button">
<i class="stop icon"></i> Stop
</button>
<button class="ui right labeled icon button">
Forward
<i class="right chevron icon"></i>
</button>
</div>
<div class="ui divider"></div>
<div class="five ui buttons">
<button class="ui button">Overview</button>
<button class="ui button">Specs</button>
<button class="ui button">Warranty</button>
<button class="ui button">Reviews</button>
<button class="ui button">Support</button>
</div>
<div class="three blue ui buttons">
<button class="ui button">Overview</button>
<button class="ui button">Specs</button>
<button class="ui button">Support</button>
</div>
<div class="three blue basic ui buttons">
<button class="ui button">Overview</button>
<button class="ui button">Specs</button>
<button class="ui button">Support</button>
</div>
<div class="ui small basic icon buttons">
<button class="ui button"><i class="file icon"></i></button>
<button class="ui button"><i class="save icon"></i></button>
<button class="ui button"><i class="upload icon"></i></button>
<button class="ui button"><i class="download icon"></i></button>
</div>
</body>
</html>