Skip to content

Commit 4bf9cb7

Browse files
ys-pro-ductionys-pro-duction
authored
Added Youtube Button (#1435)
1 parent 7e5554f commit 4bf9cb7

File tree

3 files changed

+222
-0
lines changed

3 files changed

+222
-0
lines changed

‎Components/Buttons/Youtube-Button/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Youtube Button</title>
9+
</head>
10+
11+
<body>
12+
<div class="button-container">
13+
<button class="yt-button subscribe-btn rounded-button">
14+
Subscribe
15+
</button>
16+
<div class="buttons-row">
17+
<div class="scroll-container">
18+
<div class="likes-container rounded-button" style="display: flex; gap: 4px;">
19+
<button class="yt-button left-rounded-button">
20+
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
21+
style="pointer-events: none; display: inherit;height: 100%;rotate: 180deg;">
22+
<path
23+
d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z">
24+
</path>
25+
</svg>
26+
<span class="button-count">12K</span>
27+
</button>
28+
<div class="like-divider"></div>
29+
<button class="yt-button right-rounded-button">
30+
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
31+
style="pointer-events: none; display: inherit; height: 100%;">
32+
<path
33+
d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z">
34+
</path>
35+
</svg>
36+
</button>
37+
</div>
38+
<div class="divider"></div>
39+
<button class="yt-button rounded-button">
40+
<svg height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
41+
<path
42+
d="M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z" />
43+
</svg>
44+
Share
45+
</button>
46+
<button class="yt-button rounded-button">
47+
<svg height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
48+
<path
49+
d="M17 18V19H6V18H17ZM16.5 11.4L15.8 10.7L12 14.4V4H11V14.4L7.2 10.6L6.5 11.3L11.5 16.3L16.5 11.4Z" />
50+
</svg>
51+
Download
52+
</button>
53+
<div class="yt-button rounded-button three-dot">
54+
<svg height="24" viewBox="0 0 24 24" width="36" focusable="false">
55+
<path
56+
d="M7.5 12c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm4.5-1.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm6 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z">
57+
</path>
58+
</svg>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</body>
64+
65+
</html>

‎Components/Buttons/Youtube-Button/style.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
min-height: 100vh;
6+
margin: 0;
7+
background-color: #f9f9f9;
8+
font-family: 'Roboto', Arial, sans-serif;
9+
}
10+
11+
.button-container {
12+
display: flex;
13+
flex-direction: row;
14+
gap: 16px;
15+
align-items: center;
16+
background-color: white;
17+
padding: 16px;
18+
border-radius: 100px;
19+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
20+
max-width: 100%;
21+
overflow-x: auto;
22+
}
23+
24+
.buttons-row {
25+
display: flex;
26+
flex-wrap: nowrap;
27+
overflow-x: auto;
28+
gap: 12px;
29+
scrollbar-width: none;
30+
}
31+
32+
.yt-button {
33+
display: flex;
34+
align-items: center;
35+
gap: 6px;
36+
padding: 8px 16px;
37+
border: none;
38+
background-color: #f2f2f2;
39+
cursor: pointer;
40+
transition: background-color 0.2s;
41+
font-size: 12px;
42+
color: #0f0f0f;
43+
height: 36px;
44+
flex-shrink: 0;
45+
}
46+
47+
.yt-button:hover {
48+
background-color: #e5e5e5;
49+
}
50+
51+
.subscribe-btn {
52+
background-color: #0f0f0f;
53+
color: white;
54+
height: 36px;
55+
}
56+
57+
.subscribe-btn:hover {
58+
background-color: #272727;
59+
}
60+
61+
.divider {
62+
width: 1px;
63+
height: 24px;
64+
background-color: #e5e5e5;
65+
margin: 0 8px;
66+
}
67+
68+
.button-count {
69+
font-size: 14px;
70+
margin-left: 4px;
71+
}
72+
73+
.likes-container {
74+
background-color: #f2f2f2;
75+
cursor: pointer;
76+
transition: background-color 0.2s;
77+
font-size: 14px;
78+
color: #0f0f0f;
79+
height: 36px;
80+
}
81+
82+
.rounded-button {
83+
border-radius: 18px;
84+
}
85+
86+
.left-rounded-button {
87+
border-top-left-radius: 18px;
88+
border-bottom-left-radius: 18px;
89+
}
90+
91+
.right-rounded-button {
92+
border-top-right-radius: 18px;
93+
border-bottom-right-radius: 18px;
94+
}
95+
96+
.like-divider {
97+
width: 2px;
98+
height: 24px;
99+
margin: 6px -4px 0 -4px;
100+
background-color: #e5e5e5;
101+
}
102+
103+
.three-dot {
104+
padding: 0%;
105+
justify-content: center;
106+
height: 36px;
107+
width: 36px;
108+
}
109+
110+
.scroll-container {
111+
display: flex;
112+
flex-wrap: nowrap;
113+
overflow-x: auto;
114+
gap: 12px;
115+
width: 100%;
116+
scrollbar-width: none;
117+
}
118+
119+
@media (max-width: 768px) {
120+
.button-container {
121+
flex-direction: column;
122+
gap: 8px;
123+
padding: 12px;
124+
border-radius: 16px;
125+
}
126+
127+
.yt-button {
128+
font-size: 10px;
129+
padding: 6px 12px;
130+
height: auto;
131+
}
132+
133+
.subscribe-btn {
134+
align-self: center;
135+
font-size: 14px;
136+
}
137+
}
138+
139+
@media (max-width: 480px) {
140+
.button-container {
141+
padding: 8px;
142+
}
143+
144+
.yt-button {
145+
font-size: 10px;
146+
padding: 4px 10px;
147+
}
148+
149+
.button-count {
150+
font-size: 12px;
151+
}
152+
}

‎assets/json_files/buttons.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,5 +238,10 @@
238238
"title": "Wiggle Button",
239239
"previewLink": "../../Components/Buttons/Wiggle-Button/index.html",
240240
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Wiggle-Button"
241+
},
242+
{
243+
"title": "Youtube Button",
244+
"previewLink": "../../Components/Buttons/Youtube-Button/index.html",
245+
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Youtube-Button"
241246
}
242247
]

0 commit comments

Comments
 (0)