Skip to content

Instantly share code, notes, and snippets.

@AminoffZ

AminoffZ/new-button-structure.html

Created October 14, 2023 20:36
Show Gist options
  • Save AminoffZ/ffc37e0881a6d6324d5187696288f1a7 to your computer and use it in GitHub Desktop.
Save AminoffZ/ffc37e0881a6d6324d5187696288f1a7 to your computer and use it in GitHub Desktop.
Download ZIP
The structure of the new like and dislike buttons on YouTube
Raw
new-button-structure.html
<div
id="top-level-buttons-computed"
class="top-level-buttons style-scope ytd-menu-renderer"
>
<ytd-segmented-like-dislike-button-renderer
class="style-scope ytd-menu-renderer"
button-renderer="true"
><!--css-build:shady--><!--css-build:shady--><yt-smartimation
class="style-scope ytd-segmented-like-dislike-button-renderer"
><div
id="segmented-buttons-wrapper"
class="style-scope ytd-segmented-like-dislike-button-renderer"
>
<div
id="segmented-like-button"
class="style-scope ytd-segmented-like-dislike-button-renderer"
>
<ytd-toggle-button-renderer
class="style-scope ytd-segmented-like-dislike-button-renderer"
button-renderer="true"
><!--css-build:shady--><yt-button-shape
><button
class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start"
aria-pressed="false"
aria-label="like this video along with 16,932,531 other people"
title=""
style=""
>
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px"
><yt-animated-icon
class="style-scope yt-icon"
animated-icon-type="LIKE"
><!--css-build:shady--><!--css-build:shady--><ytd-lottie-player
class="style-scope yt-animated-icon"
><lottie-component class="lottie-component"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 270 270"
width="270"
height="270"
preserveAspectRatio="xMidYMid meet"
style="
width: 100%;
height: 100%;
transform: translate3d(0px, 0px, 0px);
"
>
<defs>
<clipPath id="__lottie_element_41">
<rect
width="270"
height="270"
x="0"
y="0"
></rect>
</clipPath>
<clipPath id="__lottie_element_43">
<path d="M0,0 L120,0 L120,120 L0,120z"></path>
</clipPath>
<clipPath id="__lottie_element_57">
<path d="M0,0 L128,0 L128,128 L0,128z"></path>
</clipPath>
</defs>
<g clip-path="url(#__lottie_element_41)">
<g
clip-path="url(#__lottie_element_57)"
style="display: none"
>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
<g style="display: none">
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
<g><path></path></g>
</g>
<g style="display: none">
<g>
<path
stroke-linecap="round"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
</g>
</g>
<g
clip-path="url(#__lottie_element_43)"
transform="matrix(1.0880000591278076,0,0,1.0880000591278076,69.95299530029297,67.9433822631836)"
opacity="1"
style="display: block"
>
<g style="display: none">
<path></path>
<path
stroke-linecap="butt"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
<g
transform="matrix(1,0,0,1,60,60)"
opacity="1"
style="display: block"
>
<path
stroke-linecap="butt"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
stroke="rgb(255,255,255)"
stroke-opacity="1"
stroke-width="4"
d=" M25.025999069213867,-4.00600004196167 C25.025999069213867,-4.00600004196167 5.992000102996826,-3.996999979019165 5.992000102996826,-3.996999979019165 C5.992000102996826,-3.996999979019165 11.012999534606934,-22.983999252319336 11.012999534606934,-22.983999252319336 C12.230999946594238,-26.90399932861328 13,-31.94300079345703 8.994000434875488,-31.981000900268555 C7,-32 5,-32 4.021999835968018,-31.007999420166016 C4.021999835968018,-31.007999420166016 -19.993000030517578,-5.03000020980835 -19.993000030517578,-5.03000020980835 C-19.993000030517578,-5.03000020980835 -20.027999877929688,32.025001525878906 -20.027999877929688,32.025001525878906 C-20.027999877929688,32.025001525878906 20.97599983215332,31.986000061035156 20.97599983215332,31.986000061035156 C25.010000228881836,31.986000061035156 26.198999404907227,29.562000274658203 26.99799919128418,25.985000610351562 C26.99799919128418,25.985000610351562 31.972000122070312,4.026000022888184 31.972000122070312,4.026000022888184 C33,-0.6930000185966492 30.392000198364258,-4.00600004196167 25.025999069213867,-4.00600004196167z"
></path>
</g>
<g style="display: none">
<path></path>
<path
stroke-linecap="butt"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
></path>
</g>
<g
transform="matrix(1,0,0,1,60,60)"
opacity="1"
style="display: block"
>
<path
stroke-linecap="butt"
stroke-linejoin="miter"
fill-opacity="0"
stroke-miterlimit="4"
stroke="rgb(255,255,255)"
stroke-opacity="1"
stroke-width="4"
d=" M-19.986000061035156,-4.03000020980835 C-19.986000061035156,-4.03000020980835 -36.020999908447266,-3.996999979019165 -36.020999908447266,-3.996999979019165 C-36.020999908447266,-3.996999979019165 -36.00199890136719,31.993000030517578 -36.00199890136719,31.993000030517578 C-36.00199890136719,31.993000030517578 -20.030000686645508,32.02299880981445 -20.030000686645508,32.02299880981445 C-20.030000686645508,32.02299880981445 -19.986000061035156,-4.03000020980835 -19.986000061035156,-4.03000020980835z"
></path>
</g>
</g>
</g></svg></lottie-component></ytd-lottie-player></yt-animated-icon
><!--css-build:shady--><!--css-build:shady--></yt-icon
>
</div>
<div class="yt-spec-button-shape-next__button-text-content">
<yt-animated-rolling-number
class="animated-rolling-number-wiz"
dir="ltr"
aria-hidden="true"
style="height: 36px; line-height: 36px"
><animated-rolling-character
class="animated-rolling-character-wiz"
style="margin-top: -36px"
><div>&nbsp;</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>&nbsp;</div></animated-rolling-character
><animated-rolling-character
class="animated-rolling-character-wiz"
style="margin-top: -216px"
><div>&nbsp;</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>&nbsp;</div></animated-rolling-character
><animated-rolling-character
class="animated-rolling-character-wiz"
style="margin-top: -36px"
><div>&nbsp;</div>
<div>M</div>
<div>&nbsp;</div></animated-rolling-character
></yt-animated-rolling-number
>
</div>
<yt-touch-feedback-shape style="border-radius: inherit"
><div
class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response"
aria-hidden="true"
>
<div
class="yt-spec-touch-feedback-shape__stroke"
style=""
></div>
<div
class="yt-spec-touch-feedback-shape__fill"
style=""
></div></div
></yt-touch-feedback-shape></button
></yt-button-shape>
<tp-yt-paper-tooltip
fit-to-visible-bounds=""
offset="8"
role="tooltip"
tabindex="-1"
style="inset: 83.0868px auto auto 526.814px"
><!--css-build:shady-->
<div
id="tooltip"
class="style-scope tp-yt-paper-tooltip hidden"
style-target="tooltip"
>
I like this
</div>
</tp-yt-paper-tooltip>
</ytd-toggle-button-renderer>
</div>
<div
id="segmented-dislike-button"
class="style-scope ytd-segmented-like-dislike-button-renderer"
>
<ytd-toggle-button-renderer
class="style-scope ytd-segmented-like-dislike-button-renderer"
button-renderer="true"
><!--css-build:shady--><yt-button-shape
><button
class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end"
aria-pressed="false"
aria-label="Dislike this video"
title=""
style=""
>
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px"
><!--css-build:shady--><!--css-build:shady--><yt-icon-shape
class="style-scope yt-icon"
><icon-shape class="yt-spec-icon-shape"
><div
style="width: 100%; height: 100%; fill: currentcolor"
>
<svg
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
style="
pointer-events: none;
display: block;
width: 100%;
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></div></icon-shape></yt-icon-shape
></yt-icon>
</div>
<yt-touch-feedback-shape style="border-radius: inherit"
><div
class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response"
aria-hidden="true"
>
<div
class="yt-spec-touch-feedback-shape__stroke"
style=""
></div>
<div
class="yt-spec-touch-feedback-shape__fill"
style=""
></div></div
></yt-touch-feedback-shape></button
></yt-button-shape>
<tp-yt-paper-tooltip
fit-to-visible-bounds=""
offset="8"
role="tooltip"
tabindex="-1"
style="inset: 83.0868px auto auto 586.224px"
><!--css-build:shady-->
<div
id="tooltip"
class="style-scope tp-yt-paper-tooltip hidden"
style-target="tooltip"
>
I dislike this
</div>
</tp-yt-paper-tooltip>
</ytd-toggle-button-renderer>
</div>
</div></yt-smartimation
></ytd-segmented-like-dislike-button-renderer
><ytd-button-renderer
class="style-scope ytd-menu-renderer"
button-renderer=""
button-next=""
><!--css-build:shady--><yt-button-shape
><button
class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading"
aria-label="Share"
title=""
style=""
>
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px"
><!--css-build:shady--><!--css-build:shady--><yt-icon-shape
class="style-scope yt-icon"
><icon-shape class="yt-spec-icon-shape"
><div style="width: 100%; height: 100%; fill: currentcolor">
<svg
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
style="
pointer-events: none;
display: block;
width: 100%;
height: 100%;
"
>
<path
d="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"
></path>
</svg></div></icon-shape></yt-icon-shape
></yt-icon>
</div>
<div class="yt-spec-button-shape-next__button-text-content">
<span
class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap"
role="text"
>Share</span
>
</div>
<yt-touch-feedback-shape style="border-radius: inherit"
><div
class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response"
aria-hidden="true"
>
<div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
<div class="yt-spec-touch-feedback-shape__fill" style=""></div></div
></yt-touch-feedback-shape></button></yt-button-shape
><tp-yt-paper-tooltip
fit-to-visible-bounds=""
offset="8"
role="tooltip"
tabindex="-1"
><!--css-build:shady-->
<div
id="tooltip"
class="hidden style-scope tp-yt-paper-tooltip"
style-target="tooltip"
>
Share
</div>
</tp-yt-paper-tooltip></ytd-button-renderer
>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment