{"id":1701,"date":"2023-08-20T17:25:50","date_gmt":"2023-08-20T14:25:50","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1701"},"modified":"2023-08-20T17:25:51","modified_gmt":"2023-08-20T14:25:51","slug":"upload-button","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/buttons\/1701\/","title":{"rendered":"Upload Button"},"content":{"rendered":"\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"480\" height=\"233\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/08\/peek-2023-08-20-16-21.gif\" alt=\"Upload Button\" class=\"wp-image-1702 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;button class=&quot;upload-button&quot;&gt;\n  &lt;div class=&quot;default&quot;&gt;\n    &lt;div&gt;Upload&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;success&quot;&gt;\n    &lt;svg viewBox=&quot;0 0 13 10&quot;&gt;\n      &lt;path d=&quot;M1 5L4.66667 9L12 1&quot; \/&gt;\n    &lt;\/svg&gt;\n    &lt;div&gt;Done&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;dots&quot;&gt;\n    &lt;span&gt;&lt;\/span&gt;\n    &lt;span&gt;&lt;\/span&gt;\n    &lt;span&gt;&lt;\/span&gt;\n    &lt;span&gt;&lt;\/span&gt;\n    &lt;span&gt;&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;svg viewBox=&quot;0 0 132 52&quot;&gt;\n    &lt;path\n      d=&quot;M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z&quot;\n    \/&gt;\n  &lt;\/svg&gt;\n&lt;\/button&gt;\n\n&lt;script src=&quot;https:\/\/unpkg.co\/gsap@3\/dist\/gsap.min.js&quot;  &gt;&lt;\/script&gt; \n&lt;script src=&quot;https:\/\/assets.codepen.io\/16327\/MorphSVGPlugin3.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.upload-button {\n\tfont-family: &quot;Poppins&quot;, Arial;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\t-webkit-appearance: none;\n\t   -moz-appearance: none;\n\t\t\tappearance: none;\n\tcolor: #fff;\n\tbackground: none;\n\tborder: none;\n\toutline: none;\n\tcursor: pointer;\n\twidth: 128px;\n\tpadding: 0;\n\tmargin: 0;\n\ttext-align: center;\n\tline-height: 20px;\n\tposition: relative;\n\tfilter: drop-shadow(0px 4px 12px rgba(118, 70, 215, 0.1));\n\ttransform: translateZ(0);\n  }\n  .upload-button &gt; svg {\n\tdisplay: block;\n\twidth: 132px;\n\theight: 52px;\n\tfill: #7646d7;\n\tpointer-events: none;\n\tmargin: -4px -2px;\n\ttransition: fill 0.2s, transform 0.1s;\n\ttransform: translateZ(0);\n  }\n  .upload-button:hover &gt; svg {\n\tfill: #6f3bda;\n  }\n  .upload-button:active &gt; svg {\n\ttransform: scale(0.975) translateZ(0);\n  }\n  .upload-button .default,\n  .upload-button .success {\n\ttop: 12px;\n\tbottom: 12px;\n\tleft: 0;\n\tright: 0;\n\tposition: absolute;\n\tdisplay: block;\n\tz-index: 1;\n  }\n  .upload-button .default &gt; div,\n  .upload-button .success &gt; div {\n\tdisplay: inline-block;\n\tvertical-align: top;\n  }\n  .upload-button .default &gt; div &gt; div span,\n  .upload-button .success &gt; div &gt; div span {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\ttransform-origin: 50% 100%;\n\ttransform: translateZ(0);\n  }\n  .upload-button .success svg {\n\twidth: 13px;\n\theight: 10px;\n\tfill: none;\n\tstroke: currentColor;\n\tstroke-linejoin: round;\n\tstroke-linecap: round;\n\tstroke-width: 2;\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tmargin: 5px 4px 5px 0;\n\tstroke-dasharray: 17px;\n\tstroke-dashoffset: 17px;\n\ttransform: translateZ(0);\n  }\n  .upload-button .success &gt; div &gt; div span {\n\topacity: 0;\n\ttransform: scale(0.25) translateZ(0);\n  }\n  .upload-button .dots {\n\ttop: 19px;\n\tbottom: 19px;\n\tleft: 0;\n\tright: 0;\n\tposition: absolute;\n\tdisplay: flex;\n\tjustify-content: center;\n\tz-index: 1;\n  }\n  .upload-button .dots span {\n\tdisplay: block;\n\twidth: 6px;\n\theight: 6px;\n\tborder-radius: 50%;\n\tbackground-color: currentColor;\n\tmargin: 0 3px;\n\ttransform: translateY(6px) scale(0);\n  }\n  \n  html {\n\tbox-sizing: border-box;\n\t-webkit-font-smoothing: antialiased;\n  }\n  \n  * {\n\tbox-sizing: inherit;\n  }\n  *:before, *:after {\n\tbox-sizing: inherit;\n  }\n  \n  body {\n\tmin-height: 100vh;\n\tdisplay: flex;\n\tfont-family: &quot;Poppins&quot;, Arial;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: #fdf9f7;\n  }\n  body .twitter {\n\tposition: fixed;\n\tdisplay: block;\n\tright: 12px;\n\tbottom: 12px;\n  }\n  body .twitter svg {\n\twidth: 32px;\n\theight: 32px;\n\tfill: #1da1f2;\n  }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const { to, set } = gsap;\n\ngsap.registerPlugin(MorphSVGPlugin);\n\ndocument.querySelectorAll(&quot;.upload-button&quot;).forEach((button) =&gt; {\n  const path = button.querySelector(&quot;:scope &gt; svg path&quot;);\n  const dots = button.querySelectorAll(&quot;.dots span&quot;);\n\n  button\n    .querySelectorAll(&quot;.default &gt; div, .success &gt; div&quot;)\n    .forEach(\n      (state) =&gt;\n        (state.innerHTML =\n          &quot;&lt;div&gt;&lt;span&gt;&quot; +\n          state.textContent.trim().split(&quot;&quot;).join(&quot;&lt;\/span&gt;&lt;span&gt;&quot;) +\n          &quot;&lt;\/span&gt;&lt;\/div&gt;&quot;)\n    );\n\n  const defaultLetters = button.querySelectorAll(&quot;.default span&quot;);\n  const successLetters = button.querySelectorAll(&quot;.success span&quot;);\n  const successTick = button.querySelector(&quot;.success svg&quot;);\n\n  const reset = () =&gt; {\n    to(successTick, {\n      strokeDashoffset: &quot;17px&quot;,\n      duration: 0.15,\n    });\n    to(successLetters, {\n      stagger: 0.075,\n      scale: 0.25,\n      opacity: 0,\n      duration: 0.15,\n      onComplete: () =&gt; {\n        to(defaultLetters, {\n          stagger: 0.075,\n          scale: 1,\n          opacity: 1,\n          duration: 0.15,\n          onComplete: () =&gt; (button.active = false),\n        });\n      },\n    });\n  };\n\n  button.addEventListener(&quot;click&quot;, () =&gt; {\n    if (button.active) {\n      return;\n    }\n\n    button.active = true;\n\n    to([...defaultLetters].reverse(), {\n      stagger: 0.075,\n      keyframes: [\n        {\n          scale: 1.075,\n          duration: 0.15,\n        },\n        {\n          scale: 0.2,\n          opacity: 0,\n          duration: 0.2,\n        },\n      ],\n      onComplete: () =&gt; {\n        to(dots, {\n          stagger: 0.075,\n          keyframes: [\n            {\n              y: -5,\n              scale: 1,\n              duration: 0.25,\n            },\n            {\n              y: 5,\n              duration: 0.25,\n            },\n            {\n              y: -5,\n              duration: 0.25,\n            },\n            {\n              y: 5,\n              duration: 0.25,\n            },\n            {\n              y: -5,\n              duration: 0.25,\n            },\n            {\n              y: 5,\n              scale: 0,\n              duration: 0.25,\n            },\n          ],\n        });\n\n        to(path, {\n          keyframes: [\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z&quot;,\n            },\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z&quot;,\n            },\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z&quot;,\n            },\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z&quot;,\n            },\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z&quot;,\n            },\n            {\n              duration: 0.25,\n              morphSVG:\n                &quot;M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z&quot;,\n            },\n          ],\n          onComplete: () =&gt; {\n            to(successTick, {\n              strokeDashoffset: &quot;0px&quot;,\n              duration: 0.2,\n              onComplete: () =&gt; {\n                to(successLetters, {\n                  stagger: 0.075,\n                  keyframes: [\n                    {\n                      scale: 1.1,\n                      opacity: 1,\n                      duration: 0.15,\n                    },\n                    {\n                      scale: 1,\n                      duration: 0.15,\n                    },\n                  ],\n                  onComplete: () =&gt; {\n                    to(button, {\n                      keyframes: [\n                        {\n                          scale: 1.05,\n                          duration: 0.15,\n                        },\n                        {\n                          scale: 1,\n                          duration: 0.1,\n                          clearProps: true,\n                        },\n                      ],\n                      onComplete: () =&gt; {\n                        setTimeout(reset, 2000);\n                      },\n                    });\n                  },\n                });\n              },\n            });\n          },\n        });\n      },\n    });\n  });\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[27],"class_list":["post-1701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-buttons","tag-gsap"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1701"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1701\/revisions"}],"predecessor-version":[{"id":1703,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1701\/revisions\/1703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1702"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}