Skip to content

Commit

Permalink
Added Youtube Button (#1435)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ys-pro-duction
ys-pro-duction authored Jan 10, 2025
1 parent 7e5554f commit 4bf9cb7
Show file tree
Hide file tree
Showing 3 changed files with 222 additions and 0 deletions.
65 changes: 65 additions & 0 deletions Components/Buttons/Youtube-Button/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Youtube Button</title>
</head>

<body>
<div class="button-container">
<button class="yt-button subscribe-btn rounded-button">
Subscribe
</button>
<div class="buttons-row">
<div class="scroll-container">
<div class="likes-container rounded-button" style="display: flex; gap: 4px;">
<button class="yt-button left-rounded-button">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
style="pointer-events: none; display: inherit;height: 100%;rotate: 180deg;">
<path
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">
</path>
</svg>
<span class="button-count">12K</span>
</button>
<div class="like-divider"></div>
<button class="yt-button right-rounded-button">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true"
style="pointer-events: none; display: inherit; height: 100%;">
<path
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">
</path>
</svg>
</button>
</div>
<div class="divider"></div>
<button class="yt-button rounded-button">
<svg height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path
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" />
</svg>
Share
</button>
<button class="yt-button rounded-button">
<svg height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
<path
d="M17 18V19H6V18H17ZM16.5 11.4L15.8 10.7L12 14.4V4H11V14.4L7.2 10.6L6.5 11.3L11.5 16.3L16.5 11.4Z" />
</svg>
Download
</button>
<div class="yt-button rounded-button three-dot">
<svg height="24" viewBox="0 0 24 24" width="36" focusable="false">
<path
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">
</path>
</svg>
</div>
</div>
</div>
</div>
</body>

</html>
152 changes: 152 additions & 0 deletions Components/Buttons/Youtube-Button/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
5 changes: 5 additions & 0 deletions assets/json_files/buttons.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]

0 comments on commit 4bf9cb7

Please sign in to comment.