{"id":"ExqYGKJ","description":"A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used. Works great in Chromium and Firefox....","image":"https://shots.codepen.io/username/pen/ExqYGKJ-800.jpg?version=1727036581","title":"Gooey Approve Button (With Cancel)","creator":"konstantindenerz","username":"konstantindenerz","profile":{"url":"https://codepen.io/konstantindenerz","name":"konstantindenerz"},"tags":["css","ux","button","gooey","designsystem"],"full_description":"

A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used.

\n\n

Works great in Chromium and Firefox.

","date_indexed":"2024-09-23T09:07:56.118Z","date_indexed_unix":1727082476118,"created_at":1726998925,"updated_at":1727036581,"initData":"","avatar_url":"https://assets.codepen.io/907471/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1675848036&width=512","codes":"\n\n\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n \n \n\n CodePen - Gooey Approve Button (With Cancel) \n\n \n \n\n \n\n \n\n \n\n \n\n\n\n\n\n CodePen - Gooey Approve Button (With Cancel) \n\n \n\n\n\n

⚠️ Do not enter passwords or personal information on this page. ⚠️

\n This is a code demo posted by a web developer on CodePen.\n
\n A referer from CodePen is required to render this page view, and your browser is not sending one (more details).\n

\n\n

\n \n\n\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n \n \n\n\n CodePen - Gooey Approve Button (With Cancel) \n\n \n \n\n\n \n\n \n \n\n\n \n\n \n \n\n\n\n Approve\n \n \n\n \n\n\n\n\"\n sandbox=\"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation\" allow=\"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *\" allowTransparency=\"true\"\n allowpaymentrequest=\"true\" allowfullscreen=\"true\" class=\"result-iframe\">\n \n

\n\n\n\n\n","objectID":"ExqYGKJ","_highlightResult":{"id":{"value":"ExqYGKJ","matchLevel":"full","fullyHighlighted":true,"matchedWords":["exqygkj"]},"description":{"value":"A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used. Works great in Chromium and Firefox....","matchLevel":"none","matchedWords":[]},"title":{"value":"Gooey Approve Button (With Cancel)","matchLevel":"none","matchedWords":[]},"creator":{"value":"konstantindenerz","matchLevel":"none","matchedWords":[]},"tags":[{"value":"css","matchLevel":"none","matchedWords":[]},{"value":"ux","matchLevel":"none","matchedWords":[]},{"value":"button","matchLevel":"none","matchedWords":[]},{"value":"gooey","matchLevel":"none","matchedWords":[]},{"value":"designsystem","matchLevel":"none","matchedWords":[]}],"full_description":{"value":"

A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used.

\n\n

Works great in Chromium and Firefox.

","matchLevel":"none","matchedWords":[]}}}