{"id":"JjaqgWN","description":"Buttons with simple clip path animations on focus...","image":"https://shots.codepen.io/username/pen/JjaqgWN-800.jpg?version=1681409477","creator":"_jdillon","title":"Clip path button focus effects, updated to support mobile browsers","username":"jdillon","profile":{"url":"https://codepen.io/jdillon","name":"jdillon"},"tags":["clip-path","button","focus","animation","transition"],"full_description":"

Buttons with simple clip path animations on focus

","date_indexed":"2023-10-02T10:56:17.971Z","date_indexed_unix":1696244177971,"created_at":1680268932,"updated_at":1681409477,"initData":"","avatar_url":"https://assets.codepen.io/4323554/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1655911697&width=512","codes":"\n\n\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n \n \n\n CodePen - Clip path button focus effects, updated to support mobile browsers\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n\n\n CodePen - Clip path button focus effects, updated to support mobile browsers\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 - Clip path button focus effects, updated to support mobile browsers\n\n \n \n \n \n \n\n\n \n\n \n \n\n\n\n

clip-path Buttons

\n\n

Normal

\n\n

Top to bottom

\n \n

\n\n

Left to right

\n \n

\n\n

Center out y

\n \n

\n\n

Center out x

\n \n

\n\n

Dramatic

\n\n

Top to bottom

\n \n

\n\n

Left to right

\n \n

\n\n

Center out y

\n \n

\n\n

Center out x

\n \n

\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":"JjaqgWN","_highlightResult":{"id":{"value":"JjaqgWN","matchLevel":"full","fullyHighlighted":true,"matchedWords":["jjaqgwn"]},"description":{"value":"Buttons with simple clip path animations on focus...","matchLevel":"none","matchedWords":[]},"creator":{"value":"_jdillon","matchLevel":"none","matchedWords":[]},"title":{"value":"Clip path button focus effects, updated to support mobile browsers","matchLevel":"none","matchedWords":[]},"tags":[{"value":"clip-path","matchLevel":"none","matchedWords":[]},{"value":"button","matchLevel":"none","matchedWords":[]},{"value":"focus","matchLevel":"none","matchedWords":[]},{"value":"animation","matchLevel":"none","matchedWords":[]},{"value":"transition","matchLevel":"none","matchedWords":[]}],"full_description":{"value":"

Buttons with simple clip path animations on focus

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