{"id":"poqKrGe","description":"A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by @rogie...","image":"https://shots.codepen.io/username/pen/poqKrGe-800.jpg?version=1695925136","title":"100% CSS Fantasy Buttons - Highly Customizable","creator":"propjockey","username":"propjockey","profile":{"url":"https://codepen.io/propjockey","name":"propjockey"},"tags":["css","button","fantasy"],"full_description":"

A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by @rogie

","date_indexed":"2023-09-28T18:25:56.142Z","date_indexed_unix":1695925556142,"created_at":1695924280,"updated_at":1695925136,"initData":"","avatar_url":"https://assets.codepen.io/5018232/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1639240180&width=512","codes":"\n\n\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n \n \n\n CodePen - 100% CSS Fantasy Buttons - Highly Customizable\n\n \n \n\n \n\n \n\n \n\n \n\n\n\n\n\n CodePen - 100% CSS Fantasy Buttons - Highly Customizable\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 CodePen - 100% CSS Fantasy Buttons - Highly Customizable\n\n \n \n \n \n \n\n\n \n\n \n \n\n\n\n \n
\n
\n
\nBased on design by @rogie
\n
\nPrompted to CSS by @LukyVJ
\n
\nCSS'd by Jane Ori
\n
\n\n

\n

\n

\n

\n

\n  \n

\n

\n

\n

\n \n

\n ~ fantasy-btn styling ~
\n apply these properties to the button as needed.
\n The hover/focus/active variants will be applied when appropriate.
\n
\n --text-color: <color>;
\n --text-hover-color: ...;
\n --text-focus-color: ...;
\n --text-active-color: ...;
\n
\n --text-shadow: text-shadow;
\n --text-hover-shadow: ...;
\n --text-focus-shadow: ...;
\n --text-active-shadow: ...;
\n
\n --border-bg: background; Defaults to `currentColor`
\n --border-hover-bg: ...;
\n --border-focus-bg: ...;
\n --border-active-bg: ...;
\n
\n --border-opacity: float number in range [0, 1];
\n --border-hover-opacity: ...;
\n --border-focus-opacity: ...;
\n --border-active-opacity: ...;
\n
\n --inlay-bg: background; Defaults to `#8888`
\n --inlay-hover-bg: ...;
\n --inlay-focus-bg: ...;
\n --inlay-active-bg: ...;
\n
\n --inlay-opacity: float number in range [0, 1];
\n --inlay-hover-opacity: ...;
\n --inlay-focus-opacity: ...;
\n --inlay-active-opacity: ...;
\n
\n --outline-size: <length>;
\n --outline-hover-size: ...;
\n --outline-focus-size: ...;
\n --outline-active-size: ...;
\n
\n --outline-style: outline-style;
\n --outline-hover-style: ...;
\n --outline-focus-style: ...; Default is solid
\n --outline-active-style: ...;
\n
\n --outline-color: <color>;
\n --outline-hover-color: ...;
\n --outline-focus-color: ...;
\n --outline-active-color: ...;
\n
\n --outline-offset: <length>; Default varies with size
\n --outline-hover-offset: ...;
\n --outline-focus-offset: ...;
\n --outline-active-offset: ...;
\n

\n
\n
\n the border can grow to any size element and retain its proportions too, see this one that resizes:
\n \n
\n
\n
\n PS: the size variants are setting a `--scale: <number>;` var if you want more control over the thickness and other defualt properties that use --scale.\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\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":"poqKrGe","_highlightResult":{"id":{"value":"poqKrGe","matchLevel":"full","fullyHighlighted":true,"matchedWords":["poqkrge"]},"description":{"value":"A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by @rogie...","matchLevel":"none","matchedWords":[]},"title":{"value":"100% CSS Fantasy Buttons - Highly Customizable","matchLevel":"none","matchedWords":[]},"creator":{"value":"propjockey","matchLevel":"none","matchedWords":[]},"tags":[{"value":"css","matchLevel":"none","matchedWords":[]},{"value":"button","matchLevel":"none","matchedWords":[]},{"value":"fantasy","matchLevel":"none","matchedWords":[]}],"full_description":{"value":"

A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by @rogie

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