{"id":"MWXxKrP","description":"Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter...","image":"https://shots.codepen.io/username/pen/MWXxKrP-800.jpg?version=1677608619","title":"Aqua Button (pure css)","creator":"simeydotme","username":"simeydotme","profile":{"url":"https://codepen.io/simeydotme","name":"simeydotme"},"tags":["css","button","aqua","osx","filter"],"full_description":"

Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter

","date_indexed":"2023-11-06T09:13:25.564Z","date_indexed_unix":1699262005564,"created_at":1670473822,"updated_at":1677608619,"initData":"","avatar_url":"https://assets.codepen.io/13471/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=2&width=512","codes":"\n\n\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n \n \n\n CodePen - Aqua Button (pure css)\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n\n\n CodePen - Aqua Button (pure css)\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 - Aqua Button (pure css)\n\n \n \n \n\n \n\n \n\n\n \n\n \n \n\n\n\n

Aqua Buttons

\n\n

\n \n \n

\n\n

\n \n\n \n \n \n \n \n \n

design inspiration from @alazybrick on Twitter

\n \n \n\n \n\n\n\n\"\n sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation\" allow=\"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share\" allowTransparency=\"true\"\n allowpaymentrequest=\"true\" allowfullscreen=\"true\" class=\"result-iframe\">\n \n

\n\n\n\n\n","objectID":"MWXxKrP","_highlightResult":{"id":{"value":"MWXxKrP","matchLevel":"full","fullyHighlighted":true,"matchedWords":["mwxxkrp"]},"description":{"value":"Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter...","matchLevel":"none","matchedWords":[]},"title":{"value":"Aqua Button (pure css)","matchLevel":"none","matchedWords":[]},"creator":{"value":"simeydotme","matchLevel":"none","matchedWords":[]},"tags":[{"value":"css","matchLevel":"none","matchedWords":[]},{"value":"button","matchLevel":"none","matchedWords":[]},{"value":"aqua","matchLevel":"none","matchedWords":[]},{"value":"osx","matchLevel":"none","matchedWords":[]},{"value":"filter","matchLevel":"none","matchedWords":[]}],"full_description":{"value":"

Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter

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