Skip to content

Commit 385ff8f

Browse files
ShoroukAzizShoroukAziz
authored
Create demo.html
1 parent 20a9710 commit 385ff8f

File tree

1 file changed

+267
-0
lines changed

1 file changed

+267
-0
lines changed

‎buttons/demo.html

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
7+
8+
<style>
9+
:root {
10+
--my-color:#34495e;
11+
--my-color-accent:#2c3e50;
12+
--black: #3c3c3c;
13+
--black-accent: #2d2d2d;
14+
--blue: #809bce;
15+
--blue-accent: #5c6f94;
16+
--purple: #8a508f;
17+
--purple-accent: #5d3661;
18+
--mint: #b8e0d4;
19+
--mint-accent: #8ba89f;
20+
--pink: #eac4d5;
21+
--pink-accent: #b495a3;
22+
--green: #74a892;
23+
--green-accent: #5e8675;
24+
--red:#d74a49;
25+
--red-accent:#b53f3f;
26+
--orange:#d35400;
27+
--orange-accent:#9e4102;
28+
--yellow:#f1c40f;
29+
--yellow-accent:#bd9a0c;
30+
}
31+
32+
button {
33+
background: none;
34+
color: inherit;
35+
border: none;
36+
padding: 0;
37+
font: inherit;
38+
cursor: pointer;
39+
outline: inherit;
40+
}
41+
42+
i {
43+
padding-right: 2px;
44+
}
45+
46+
.btn {
47+
text-align: center;
48+
color: #ffffff;
49+
font-family: 'Manrope';
50+
display: inline-block;
51+
margin: 10px;
52+
}
53+
54+
.my-color {
55+
background-color: var(--my-color);
56+
}
57+
58+
.my-color:hover {
59+
background-color: var(--my-color-accent);
60+
}
61+
62+
.my-color.threeD {
63+
box-shadow: 0px 4px 0px var(--my-color-accent);
64+
}
65+
66+
.my-color.threeD:active {
67+
box-shadow: 0 0;
68+
background-color: var(--my-color-accent);
69+
}
70+
.black {
71+
background-color: var(--black);
72+
}
73+
74+
.black:hover {
75+
background-color: var(--black-accent);
76+
}
77+
78+
.black.threeD {
79+
box-shadow: 0px 4px 0px var(--black-accent);
80+
}
81+
82+
.black.threeD:active {
83+
box-shadow: 0 0;
84+
background-color: var(--black-accent);
85+
}
86+
87+
.blue {
88+
background-color: var(--blue);
89+
}
90+
91+
.blue:hover {
92+
background-color: var(--blue-accent);
93+
}
94+
95+
.blue.threeD {
96+
box-shadow: 0px 4px 0px var(--blue-accent);
97+
}
98+
99+
.blue.threeD:active {
100+
box-shadow: 0 0;
101+
background-color: var(--blue-accent);
102+
}
103+
104+
.purple {
105+
background-color: var(--purple);
106+
}
107+
108+
.purple:hover {
109+
background-color: var(--purple-accent);
110+
}
111+
112+
.purple.threeD {
113+
box-shadow: 0px 4px 0px var(--purple-accent);
114+
}
115+
116+
.purple.threeD:active {
117+
box-shadow: 0 0;
118+
background-color: var(--purple-accent);
119+
}
120+
121+
.mint {
122+
background-color: var(--mint);
123+
}
124+
125+
.mint:hover {
126+
background-color: var(--mint-accent);
127+
}
128+
129+
.mint.threeD {
130+
box-shadow: 0px 4px 0px var(--mint-accent);
131+
}
132+
133+
.mint.threeD:active {
134+
box-shadow: 0 0;
135+
background-color: var(--mint-accent);
136+
}
137+
138+
.pink {
139+
background-color: var(--pink);
140+
}
141+
142+
.pink:hover {
143+
background-color: var(--pink-accent);
144+
}
145+
146+
.pink.threeD {
147+
box-shadow: 0px 4px 0px var(--pink-accent);
148+
}
149+
150+
.pink.threeD:active {
151+
box-shadow: 0 0;
152+
background-color: var(--pink-accent);
153+
}
154+
155+
.green {
156+
background-color: var(--green);
157+
}
158+
159+
.green:hover {
160+
background-color: var(--green-accent);
161+
}
162+
163+
.green.threeD {
164+
box-shadow: 0px 4px 0px var(--green-accent);
165+
}
166+
167+
.green.threeD:active {
168+
box-shadow: 0 0;
169+
background-color: var(--green-accent);
170+
}
171+
172+
.red {
173+
background-color: var(--red);
174+
}
175+
176+
.red:hover {
177+
background-color: var(--red-accent);
178+
}
179+
180+
.red.threeD {
181+
box-shadow: 0px 4px 0px var(--red-accent);
182+
}
183+
184+
.red.threeD:active {
185+
box-shadow: 0 0;
186+
background-color: var(--red-accent);
187+
}
188+
189+
.orange {
190+
background-color: var(--orange);
191+
}
192+
193+
.orange:hover {
194+
background-color: var(--orange-accent);
195+
}
196+
197+
.orange.threeD {
198+
box-shadow: 0px 4px 0px var(--orange-accent);
199+
}
200+
201+
.orange.threeD:active {
202+
box-shadow: 0 0;
203+
background-color: var(--orange-accent);
204+
}
205+
206+
.yellow {
207+
background-color: var(--yellow);
208+
}
209+
210+
.yellow:hover {
211+
background-color: var(--yellow-accent);
212+
}
213+
214+
.yellow.threeD {
215+
box-shadow: 0px 4px 0px var(--yellow-accent);
216+
}
217+
218+
.yellow.threeD:active {
219+
box-shadow: 0 0;
220+
background-color: var(--yellow-accent);
221+
}
222+
223+
.rounded {
224+
border-radius: 20px;
225+
}
226+
227+
.small {
228+
padding: 5px 20px;
229+
font-size: 10px;
230+
}
231+
232+
.mid {
233+
padding: 10px 40px;
234+
font-size: 12px;
235+
}
236+
237+
.large {
238+
padding: 15px 60px;
239+
font-size: 18px;
240+
}
241+
</style>
242+
243+
</head>
244+
245+
<body>
246+
247+
248+
249+
250+
<button class="btn mid mint rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-address-book"></i>
251+
My Contacts</button>
252+
<button class="btn mid yellow rounded threeD" type="button" onclick="navigate()"><i class="fa-regular fa-images"></i>
253+
My Photos</button>
254+
<button class="btn mid red rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-folder-closed"></i>
255+
My Files</button>
256+
<button class="btn mid purple rounded threeD" type="button" onclick="navigate()"> <i class="fa-regular fa-calendar-days"></i> My Calendar</button>
257+
258+
<script>
259+
function navigate() {
260+
window.open("https://example.com", '_blank').focus();
261+
}
262+
263+
</script>
264+
265+
</body>
266+
267+
</html>

0 commit comments

Comments
 (0)