Skip to content

Commit f12e76f

Browse files
VandreicVandreic
committed
Updated lesson 3
Added more buttons to lesson 3.
1 parent 602955f commit f12e76f

File tree

2 files changed

+268
-0
lines changed

2 files changed

+268
-0
lines changed

‎lessons/lesson-03/lesson-03.css‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,3 +174,223 @@
174174
.ex3f-button-buy-now:active {
175175
transform: scale(0.95);
176176
}
177+
178+
/* Advanced Button Styles */
179+
.advanced-buttons {
180+
display: flex;
181+
flex-direction: column;
182+
gap: 20px;
183+
}
184+
185+
.primary-button {
186+
background-color: rgb(0, 123, 255);
187+
color: white;
188+
border: none;
189+
padding: 10px 20px;
190+
border-radius: 5px;
191+
cursor: pointer;
192+
transition: background-color 0.15s;
193+
}
194+
.primary-button:hover {
195+
background-color: rgb(0, 105, 217);
196+
}
197+
198+
.secondary-button {
199+
background-color: rgb(108, 117, 125);
200+
color: white;
201+
border: none;
202+
padding: 10px 20px;
203+
border-radius: 5px;
204+
cursor: pointer;
205+
transition: background-color 0.15s;
206+
}
207+
.secondary-button:hover {
208+
background-color: rgb(90, 98, 105);
209+
}
210+
211+
.danger-button {
212+
background-color: rgb(220, 53, 69);
213+
color: white;
214+
border: none;
215+
padding: 10px 20px;
216+
border-radius: 5px;
217+
cursor: pointer;
218+
transition: background-color 0.15s;
219+
}
220+
.danger-button:hover {
221+
background-color: rgb(200, 35, 51);
222+
}
223+
224+
.outline-button {
225+
background-color: transparent;
226+
color: rgb(108, 117, 125);
227+
border: 2px solid rgb(108, 117, 125);
228+
padding: 10px 20px;
229+
border-radius: 5px;
230+
cursor: pointer;
231+
transition: background-color 0.15s, color 0.15s;
232+
}
233+
.outline-button:hover {
234+
background-color: rgb(108, 117, 125);
235+
color: white;
236+
}
237+
238+
.rounded-button {
239+
background-color: rgb(40, 167, 69);
240+
color: white;
241+
border: none;
242+
padding: 10px 20px;
243+
border-radius: 50px;
244+
cursor: pointer;
245+
transition: background-color 0.15s;
246+
}
247+
.rounded-button:hover {
248+
background-color: rgb(30, 140, 55);
249+
}
250+
251+
.icon-button {
252+
background-color: rgb(23, 162, 184);
253+
color: white;
254+
border: none;
255+
padding: 10px 20px;
256+
border-radius: 5px;
257+
cursor: pointer;
258+
display: flex;
259+
align-items: center;
260+
gap: 5px;
261+
transition: background-color 0.15s;
262+
}
263+
.icon-button:hover {
264+
background-color: rgb(19, 140, 160);
265+
}
266+
267+
.gradient-button {
268+
background: linear-gradient(45deg, rgb(255, 0, 150), rgb(255, 102, 0));
269+
color: white;
270+
border: none;
271+
padding: 10px 20px;
272+
border-radius: 5px;
273+
cursor: pointer;
274+
transition: opacity 0.15s;
275+
}
276+
.gradient-button:hover {
277+
opacity: 0.9;
278+
}
279+
280+
.disabled-button {
281+
background-color: rgb(108, 117, 125);
282+
color: white;
283+
border: none;
284+
padding: 10px 20px;
285+
border-radius: 5px;
286+
cursor: not-allowed;
287+
opacity: 0.65;
288+
}
289+
290+
/* Pulse Button */
291+
.pulse-button {
292+
background-color: rgb(0, 123, 255);
293+
color: white;
294+
border: none;
295+
padding: 10px 20px;
296+
border-radius: 5px;
297+
cursor: pointer;
298+
animation: pulse 2s infinite;
299+
}
300+
@keyframes pulse {
301+
0%,
302+
100% {
303+
transform: scale(1);
304+
}
305+
50% {
306+
transform: scale(1.1);
307+
}
308+
}
309+
310+
/* Slide Button */
311+
.slide-button {
312+
background-color: rgb(40, 167, 69);
313+
color: white;
314+
border: none;
315+
padding: 10px 20px;
316+
border-radius: 5px;
317+
cursor: pointer;
318+
overflow: hidden;
319+
position: relative;
320+
}
321+
.slide-button::after {
322+
content: "";
323+
position: absolute;
324+
top: 0;
325+
left: -100%;
326+
width: 100%;
327+
height: 100%;
328+
background-color: rgba(0, 0, 0, 0.1);
329+
transition: left 0.3s;
330+
}
331+
.slide-button:hover::after {
332+
left: 0;
333+
}
334+
335+
/* Flip Button */
336+
.flip-button {
337+
background-color: rgb(220, 53, 69);
338+
color: white;
339+
border: none;
340+
padding: 10px 20px;
341+
border-radius: 5px;
342+
cursor: pointer;
343+
perspective: 1000px;
344+
}
345+
.flip-button:hover {
346+
transform: rotateY(180deg);
347+
transition: transform 0.6s;
348+
}
349+
350+
/* Glow Button */
351+
.glow-button {
352+
background-color: rgb(23, 162, 184);
353+
color: white;
354+
border: none;
355+
padding: 10px 20px;
356+
border-radius: 5px;
357+
cursor: pointer;
358+
box-shadow: 0 0 5px rgb(23, 162, 184);
359+
transition: box-shadow 0.3s;
360+
}
361+
.glow-button:hover {
362+
box-shadow: 0 0 20px rgb(23, 162, 184);
363+
}
364+
365+
/* Ripple Button */
366+
.ripple-button {
367+
background-color: rgb(255, 102, 0);
368+
color: white;
369+
border: none;
370+
padding: 10px 20px;
371+
border-radius: 5px;
372+
cursor: pointer;
373+
position: relative;
374+
overflow: hidden;
375+
}
376+
.ripple-button:active::after {
377+
content: "";
378+
position: absolute;
379+
width: 100px;
380+
height: 100px;
381+
background: rgba(255, 255, 255, 0.5);
382+
border-radius: 50%;
383+
transform: scale(0);
384+
opacity: 1;
385+
animation: ripple-effect 0.6s ease-out;
386+
pointer-events: none;
387+
top: 50%;
388+
left: 50%;
389+
transform: translate(-50%, -50%) scale(0);
390+
}
391+
@keyframes ripple-effect {
392+
to {
393+
transform: translate(-50%, -50%) scale(4);
394+
opacity: 0;
395+
}
396+
}

‎lessons/lesson-03/lesson-03.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,53 @@ <h2>Exercise 3f</h2>
5353
<p class="ex3f-delivery">Free delivery tomorrow.</p>
5454
<button class="ex3f-button-add-to-cart">Add to Cart</button>
5555
<button class="ex3f-button-buy-now">Buy now</button>
56+
57+
<hr />
58+
<br />
59+
60+
<h2>Advanced Button Styles</h2>
61+
62+
<div class="advanced-buttons">
63+
<h3>Primary Button</h3>
64+
<button class="primary-button">Primary</button>
65+
66+
<h3>Secondary Button</h3>
67+
<button class="secondary-button">Secondary</button>
68+
69+
<h3>Danger Button</h3>
70+
<button class="danger-button">Danger</button>
71+
72+
<h3>Outline Button</h3>
73+
<button class="outline-button">Outline</button>
74+
75+
<h3>Rounded Button</h3>
76+
<button class="rounded-button">Rounded</button>
77+
78+
<h3>Icon Button</h3>
79+
<button class="icon-button">
80+
<span class="icon">⭐</span> Icon Button
81+
</button>
82+
83+
<h3>Gradient Button</h3>
84+
<button class="gradient-button">Gradient</button>
85+
86+
<h3>Disabled Button</h3>
87+
<button class="disabled-button" disabled>Disabled</button>
88+
89+
<h3>Pulse Button</h3>
90+
<button class="pulse-button">Pulse</button>
91+
92+
<h3>Slide Button</h3>
93+
<button class="slide-button">Slide</button>
94+
95+
<h3>Flip Button</h3>
96+
<button class="flip-button">Flip</button>
97+
98+
<h3>Glow Button</h3>
99+
<button class="glow-button">Glow</button>
100+
101+
<h3>Ripple Button</h3>
102+
<button class="ripple-button">Ripple</button>
103+
</div>
56104
</body>
57105
</html>

0 commit comments

Comments
 (0)