diff --git a/Components/Buttons/Youtube-Button/index.html b/Components/Buttons/Youtube-Button/index.html
new file mode 100644
index 00000000..27373e28
--- /dev/null
+++ b/Components/Buttons/Youtube-Button/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+ Youtube Button
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Buttons/Youtube-Button/style.css b/Components/Buttons/Youtube-Button/style.css
new file mode 100644
index 00000000..700e1a24
--- /dev/null
+++ b/Components/Buttons/Youtube-Button/style.css
@@ -0,0 +1,152 @@
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ margin: 0;
+ background-color: #f9f9f9;
+ font-family: 'Roboto', Arial, sans-serif;
+}
+
+.button-container {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ align-items: center;
+ background-color: white;
+ padding: 16px;
+ border-radius: 100px;
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+ max-width: 100%;
+ overflow-x: auto;
+}
+
+.buttons-row {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ gap: 12px;
+ scrollbar-width: none;
+}
+
+.yt-button {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 16px;
+ border: none;
+ background-color: #f2f2f2;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ font-size: 12px;
+ color: #0f0f0f;
+ height: 36px;
+ flex-shrink: 0;
+}
+
+.yt-button:hover {
+ background-color: #e5e5e5;
+}
+
+.subscribe-btn {
+ background-color: #0f0f0f;
+ color: white;
+ height: 36px;
+}
+
+.subscribe-btn:hover {
+ background-color: #272727;
+}
+
+.divider {
+ width: 1px;
+ height: 24px;
+ background-color: #e5e5e5;
+ margin: 0 8px;
+}
+
+.button-count {
+ font-size: 14px;
+ margin-left: 4px;
+}
+
+.likes-container {
+ background-color: #f2f2f2;
+ cursor: pointer;
+ transition: background-color 0.2s;
+ font-size: 14px;
+ color: #0f0f0f;
+ height: 36px;
+}
+
+.rounded-button {
+ border-radius: 18px;
+}
+
+.left-rounded-button {
+ border-top-left-radius: 18px;
+ border-bottom-left-radius: 18px;
+}
+
+.right-rounded-button {
+ border-top-right-radius: 18px;
+ border-bottom-right-radius: 18px;
+}
+
+.like-divider {
+ width: 2px;
+ height: 24px;
+ margin: 6px -4px 0 -4px;
+ background-color: #e5e5e5;
+}
+
+.three-dot {
+ padding: 0%;
+ justify-content: center;
+ height: 36px;
+ width: 36px;
+}
+
+.scroll-container {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ gap: 12px;
+ width: 100%;
+ scrollbar-width: none;
+}
+
+@media (max-width: 768px) {
+ .button-container {
+ flex-direction: column;
+ gap: 8px;
+ padding: 12px;
+ border-radius: 16px;
+ }
+
+ .yt-button {
+ font-size: 10px;
+ padding: 6px 12px;
+ height: auto;
+ }
+
+ .subscribe-btn {
+ align-self: center;
+ font-size: 14px;
+ }
+}
+
+@media (max-width: 480px) {
+ .button-container {
+ padding: 8px;
+ }
+
+ .yt-button {
+ font-size: 10px;
+ padding: 4px 10px;
+ }
+
+ .button-count {
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/assets/json_files/buttons.json b/assets/json_files/buttons.json
index 8b5e5fdc..eadea8d8 100644
--- a/assets/json_files/buttons.json
+++ b/assets/json_files/buttons.json
@@ -238,5 +238,10 @@
"title": "Wiggle Button",
"previewLink": "../../Components/Buttons/Wiggle-Button/index.html",
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Wiggle-Button"
+ },
+ {
+ "title": "Youtube Button",
+ "previewLink": "../../Components/Buttons/Youtube-Button/index.html",
+ "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Youtube-Button"
}
]
\ No newline at end of file