-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (145 loc) · 4.65 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
<!--
Message from Brad:
Thanks for watching CSS3 in 30 Days! You're awesome.
Want more fun design & coding courses? Check out my website.
https://codecollege.ca
(it's free to start)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Fancy Buttons | Code 30 Things in 30 Days with CSS3</title>
<!-- NORMALIZE CSS -->
<link rel="stylesheet" href="./_theme-styles/normalize.css" />
<!-- PROJECT THEME CSS -->
<link rel="stylesheet" href="./_theme-styles/theme.css" />
<!-- FINAL PROJECT CSS (use for reference) -->
<link rel="stylesheet" href="final.css" />
<link
href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed"
rel="stylesheet"
/>
</head>
<body>
<h1><small>Day #1</small> CSS3 Fancy Buttons</h1>
<div class="final-result">
<h2>Final Result <small>Use this for reference!</small></h2>
<div class="content">
<section>
<h4>Facebook Style</h4>
<button
type="button"
name="button"
class="final__facebook-style-btn final__facebook-style-dark"
>
Button Dark
</button>
<button
type="button"
name="button"
class="final__facebook-style-btn final__facebook-style-light"
>
Button Light
</button>
</section>
<section>
<h4>3D Buttons</h4>
<button type="button" name="button" class="final__btn-3d-1">
3D Button 1
</button>
<button type="button" name="button" class="final__btn-3d-2">
Circle!
</button>
</section>
<section>
<h4>Gradient Bordered Buttons</h4>
<button type="button" name="button" class="final__gradient-button-1">
Gradient button 1
</button>
<button type="button" name="button" class="final__gradient-button-2">
Gradient button 2
</button>
</section>
<section>
<h4>Animated Buttons</h4>
<button type="button" name="button" class="final__animated-button-1">
Animated button 1
</button>
<button type="button" name="button" class="final__animated-button-2">
Animated button 2
</button>
</section>
<section>
<h4>Toggle Switch UI Buttons</h4>
<label for="final-toggle1" class="final__toggle-1">
<input
type="checkbox"
id="final-toggle1"
class="final__toggle-1__input"
/>
<span class="final__toggle-1__button"></span>
</label>
<label for="final-toggle2" class="final__toggle-2">
<input
type="checkbox"
id="final-toggle2"
class="final__toggle-2__input"
/>
<span class="final__toggle-2__button">Click me to activate</span>
</label>
</section>
</div>
</div>
<div class="info">
<h2>Information <small>About this lesson</small></h2>
<h3>What are we making?</h3>
<p>
Fun & fancy buttons of all shapes and sizes, made 100% with CSS3!
</p>
<h3>Where can I use it?</h3>
<p>In your websites and client projects as an appealing UI element.</p>
<h3>How compatible are these styles with major browsers?</h3>
<p>
Check the CSS3 styles from your stylesheet
<a href="http://caniuse.com/">on this website.</a> It allows you to see
the compatibility of every CSS style with major browser.
</p>
</div>
<footer>
<div class="logo">
<a href="http://codecollege.ca/" id="logo">
<img
src="./_theme-styles/img/bggray.svg"
width="60px"
id="logo_bg-gray"
/>
<img
src="./_theme-styles/img/bgyellow.svg"
width="60px"
id="logo_bg-yellow"
/>
<img
src="./_theme-styles/img/codecollegelogo.svg"
width="60px"
id="logo_codecollege"
/>
<img
src="./_theme-styles/img/codecollegelogo.png"
alt="Learn to Code by Zahar"
height="60px"
/>
</a>
</div>
<div class="made-by">
Made by <a href="https://github.com/zaharsm/">Zahar</a>
</div>
<div class="course">
<a href="https://github.com/zaharsm/"
>Code 30 things in 30 days with CSS3</a
>
</div>
<div class="copyright">© 2022 Developed by Zahar</div>
</footer>
</body>
</html>