CodePen Embed - Cool Buttons

Live

This Pen is owned by Felipe Marcos on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_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"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"auto_save\":true,\"format_on_save\":false,\"indent_with\":\"spaces\",\"tab_size\":2,\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"DyEgda\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":766598,\"user_id\":48999,\"html\":\"<div class=\\\"header\\\">\\n\\t<h1>Gradient Buttons</h1>\\n</div>\\n<div class=\\\"content\\\">\\n  \\n  <h2>Colors</h2>\\n  <ul class=\\\"color\\\">\\n    <li class=\\\"green\\\"></li>\\n    <li class=\\\"blue\\\"></li>\\n    <li class=\\\"red\\\"></li>\\t\\t\\t\\n    <li class=\\\"purple\\\"></li>\\n    <li class=\\\"cyan\\\"></li>\\n    <li class=\\\"yellow\\\"></li>\\n  </ul>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>mini</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient cyan mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient orange mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient blue mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient purple mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient green mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient yellow mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient red mini\\\">Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-gradient red mini\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>small</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient cyan small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient orange small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient blue small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient purple small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient green small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient yellow small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient red small\\\">Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-gradient red small\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>normal</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient cyan\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient orange\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient blue\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient purple\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient green\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient yellow\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient red\\\">Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-gradient red\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>large</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient cyan large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient orange large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient blue large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient purple large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient green large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient yellow large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient red large\\\">Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-gradient red large\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>block</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient cyan block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient orange block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient blue block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient purple block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient green block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient yellow block\\\">Block Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-gradient red block\\\">Block Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-gradient red block\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n</div>\\n\\n\\n<div class=\\\"header\\\">\\n\\t<h1>.btn-two</h1>\\n</div>\\n<div class=\\\"content\\\">\\n<section>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>mini</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow mini\\\">Button</a>\\n\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green mini\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>small</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow small\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green small\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>normal</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>large</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow large\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green large\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>rounded</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow rounded\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green rounded\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>block</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two green block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two blue block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two red block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two purple block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two cyan block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn-two yellow block\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-two green block\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n</section>\\n</div>\\n\\n<div class=\\\"header\\\">\\n\\t<h1>Default Buttons</h1>\\n</div>\\n<div class=\\\"content\\\">\\n\\t<section>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>mini</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan mini\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow mini\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn green mini\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>small</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan small\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow small\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn green small\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>normal</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn green\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>large</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan large\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow large\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn green large\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>rounded</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan rounded\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow rounded\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn green rounded\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t<div class=\\\"container\\\">\\n\\t\\t<h2>block</h2>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn green block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn blue block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn red block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn purple block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn cyan block\\\">Button</a>\\n\\t\\t<a href=\\\"#\\\" class=\\\"btn yellow block\\\">Button</a>\\n\\t\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d green\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n\\t</div>\\n\\n\\t</section>\\n</div>\\n\\n\\n<div class=\\\"header\\\">\\n\\t<h1>3D Buttons</h1>\\n</div>\\n<div class=\\\"content-3d\\\">\\n\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d green\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d green\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d blue\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d blue\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d red\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d red\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d purple\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d purple\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d cyan\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d cyan\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n<div class=\\\"btn-container\\\">\\n\\t<a href=\\\"#\\\" class=\\\"btn-3d yellow\\\">Button</a>\\n\\t<pre>&lt;<span class=\\\"anc\\\">a</span> <span class=\\\"att\\\">href</span>=<span class=\\\"val\\\">\\\"#\\\"</span> <span class=\\\"att\\\">class</span>=<span class=\\\"val\\\">\\\"btn-3d yellow\\\"</span>>Button&lt;/<span class=\\\"anc\\\">a</span>></pre>\\n</div>\\n</div>\",\"css\":\"* {\\n\\tbox-sizing: border-box;\\n}\\nbody {\\n\\tmargin: 0;\\n\\tbackground: #eaedf1;\\n\\tfont-family: 'Lato', sans-serif;\\n}\\n.header {\\n\\tbackground: white;\\n\\tpadding: 30px;\\n\\ttext-align: center;\\n}\\n.header h1 {\\n\\tfont-weight: 300;\\n\\tdisplay: inline;\\n}\\nh2 {\\n\\tcolor: #89867e;\\n\\ttext-align: center;\\n\\tfont-weight: 300;\\n}\\n.color {\\n\\twidth: 350px;\\n\\tmargin: 0 auto;\\n}\\n.color li {\\n\\tmargin: 0 15px 0 0;\\n\\twidth: 30px;\\n\\theight: 30px;\\n\\tdisplay: inline-block;\\n\\tborder-radius: 100%;\\n}\\n.color .red    {background: #fa5a5a;}\\n.color .yellow {background: #f0d264;}\\n.color .green  {background: #82c8a0;}\\n.color .cyan   {background: #7fccde;}\\n.color .blue   {background: #6698cb;}\\n.color .purple {background: #cb99c5;}\\n\\n.content, \\n.content-gradient, \\n.content-3d {\\n  margin: 40px auto;\\n}\\n.content {\\n  width: 80%;\\n  max-width: 700px;\\n}\\n.content-3d {\\n  width: 50%;\\n  max-width: 300px;\\n}\\npre {\\n\\twidth: 100%;\\n\\tpadding: 30px;\\n\\tbackground-color: rgba(0, 0, 0, 0.72);\\n\\tcolor: #f8f8f2;\\n\\tborder-radius: 0 0 4px 4px;\\n\\tmargin-top: 20px;\\n  white-space: pre-wrap; /* css-3 */\\n  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\\n  white-space: -pre-wrap; /* Opera 4-6 */\\n  white-space: -o-pre-wrap; /* Opera 7 */\\n  word-wrap: break-word; /* Internet Explorer 5.5+ */\\n}\\npre .bt  {color: #f8f8f2;} /* <> */\\npre .anc {color: #f92672;} /* anchor tag */\\npre .att {color: #a6a926;} /* attribute */\\npre .val {color: #e6db74;} /* value */\\n\\n.btn-container, .container {\\n\\tbackground-color: white;\\n\\tborder-radius: 4px;\\n\\ttext-align: center;\\n\\tmargin-bottom: 40px;\\n}\\n.container h2 {\\n\\tpadding-top: 30px;\\n\\tfont-weight: 300;\\n}\\n.btn, .btn-two {\\n\\tmargin: 9px;\\n}\\n.btn-gradient {\\n\\tmargin: 5px;\\n}\\na[class*=\\\"btn\\\"] {text-decoration: none;}\\ninput[class*=\\\"btn\\\"], \\nbutton[class*=\\\"btn\\\"] {border: 0;}\\n\\n/* Here you can change the button sizes */\\n.btn.large, \\n.btn-two.large, \\n.btn-effect.large {\\n  padding: 20px 40px; \\n  font-size: 22px;\\n}\\n.btn.small, \\n.btn-two.small, \\n.btn-gradient.small, \\n.btn-effect.small {\\n  padding: 8px 18px;  \\n  font-size: 14px;\\n}\\n.btn.mini, \\n.btn-two.mini, \\n.btn-gradient.mini, \\n.btn-effect.mini {\\n  padding: 4px 12px;  \\n  font-size: 12px;\\n}\\n.btn.block, \\n.btn-two.block, \\n.btn-gradient.block, \\n.btn-effect.block {\\n  display: block;\\n  width: 60%;\\n  margin-left: auto;\\n  margin-right: auto;\\n  text-align: center;\\n}\\n.btn-gradient.large {\\n  padding: 15px 45px; \\n  font-size: 22px;\\n}\\n\\n/* Colors for .btn and .btn-two */\\n.btn.blue, .btn-two.blue     {background-color: #7fb1bf;}\\n.btn.green, .btn-two.green   {background-color: #9abf7f;}\\n.btn.red, .btn-two.red       {background-color: #fa5a5a;}\\n.btn.purple, .btn-two.purple {background-color: #cb99c5;}\\n.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}\\n.btn.yellow, .btn-two.yellow {background-color: #f0d264;}\\n\\n.rounded {\\n  border-radius: 10px;\\n}\\n\\n/* default button style */\\n.btn {\\n\\tposition: relative;\\n\\tborder: 0;\\n\\tpadding: 15px 25px;\\n\\tdisplay: inline-block;\\n\\ttext-align: center;\\n\\tcolor: white;\\n}\\n.btn:active {\\n\\ttop: 4px;\\t\\n}\\n\\n/* color classes for .btn */\\n.btn.blue {box-shadow: 0px 4px #74a3b0;}\\n.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}\\n\\n.btn.green {box-shadow: 0px 4px 0px #87a86f;}\\n.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}\\n\\n.btn.red {box-shadow:0px 4px 0px #E04342;}\\n.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}\\n\\n.btn.purple {box-shadow:0px 4px 0px #AD83A8;}\\n.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}\\n\\n.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}\\n.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}\\n\\n.btn.yellow {box-shadow:0px 4px 0px #D1B757;}\\n.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}\\n\\n/* Button two - I have no creativity for names */\\n.btn-two {\\n\\tcolor: white;\\t\\n\\tpadding: 15px 25px;\\n\\tdisplay: inline-block;\\n\\tborder: 1px solid rgba(0,0,0,0.21);\\n\\tborder-bottom-color: rgba(0,0,0,0.34);\\n\\ttext-shadow:0 1px 0 rgba(0,0,0,0.15);\\n\\tbox-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, \\n\\t\\t\\t\\t      0 2px 0 -1px rgba(0,0,0,0.13), \\n\\t\\t\\t\\t      0 3px 0 -1px rgba(0,0,0,0.08), \\n\\t\\t\\t\\t      0 3px 13px -1px rgba(0,0,0,0.21);\\n}\\n.btn-two:active {\\n\\ttop: 1px;\\n\\tborder-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);\\n\\tbox-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;\\n\\tposition: relative;\\n}\\n/* 3D Button */\\n.btn-3d {\\n\\tposition: relative;\\n\\tdisplay: inline-block;\\n\\tfont-size: 22px;\\n\\tpadding: 20px 60px;\\n\\tcolor: white;\\n\\tmargin: 20px 10px 10px;\\n\\tborder-radius: 6px;\\n\\ttext-align: center;\\n\\ttransition: top .01s linear;\\n\\ttext-shadow: 0 1px 0 rgba(0,0,0,0.15);\\n}\\n.btn-3d.red:hover    {background-color: #e74c3c;}\\n.btn-3d.blue:hover   {background-color: #699DD1;}\\n.btn-3d.green:hover  {background-color: #80C49D;}\\n.btn-3d.purple:hover {background-color: #D19ECB;}\\n.btn-3d.yellow:hover {background-color: #F0D264;}\\n.btn-3d.cyan:hover   {background-color: #82D1E3;}\\n\\n.btn-3d:active {\\n\\ttop: 9px;\\n}\\n\\n/* 3D button colors */\\n.btn-3d.red {\\n\\tbackground-color: #e74c3c;\\n\\tbox-shadow: 0 0 0 1px #c63702 inset,\\n        0 0 0 2px rgba(255,255,255,0.15) inset,\\n        0 8px 0 0 #C24032,\\n        0 8px 0 1px rgba(0,0,0,0.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.red:active {\\n\\tbox-shadow: 0 0 0 1px #c63702 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n.btn-3d.blue {\\n\\tbackground-color: #6DA2D9;\\n\\tbox-shadow: 0 0 0 1px #6698cb inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 8px 0 0 rgba(110, 164, 219, .7),\\n\\t\\t\\t\\t0 8px 0 1px rgba(0,0,0,.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.blue:active {\\n\\tbox-shadow: 0 0 0 1px #6191C2 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n.btn-3d.green {\\n\\tbackground-color: #82c8a0;\\n\\tbox-shadow: 0 0 0 1px #82c8a0 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 8px 0 0 rgba(126, 194, 155, .7),\\n\\t\\t\\t\\t0 8px 0 1px rgba(0,0,0,.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.green:active {\\n\\tbox-shadow: 0 0 0 1px #82c8a0 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n.btn-3d.purple {\\n\\tbackground-color: #cb99c5;\\n\\tbox-shadow: 0 0 0 1px #cb99c5 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 8px 0 0 rgba(189, 142, 183, .7),\\n\\t\\t\\t\\t0 8px 0 1px rgba(0,0,0,.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.purple:active {\\n\\tbox-shadow: 0 0 0 1px #cb99c5 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n.btn-3d.cyan {\\n\\tbackground-color: #7fccde;\\n\\tbox-shadow: 0 0 0 1px #7fccde inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 8px 0 0 rgba(102, 164, 178, .6),\\n\\t\\t\\t\\t0 8px 0 1px rgba(0,0,0,.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.cyan:active {\\n\\tbox-shadow: 0 0 0 1px #7fccde inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n.btn-3d.yellow {\\n\\tbackground-color: #F0D264;\\n\\tbox-shadow: 0 0 0 1px #F0D264 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 8px 0 0 rgba(196, 172, 83, .7),\\n\\t\\t\\t\\t0 8px 0 1px rgba(0,0,0,.4),\\n\\t\\t\\t\\t0 8px 8px 1px rgba(0,0,0,0.5);\\n}\\n.btn-3d.yellow:active {\\n\\tbox-shadow: 0 0 0 1px #F0D264 inset,\\n\\t\\t\\t\\t0 0 0 2px rgba(255,255,255,0.15) inset,\\n\\t\\t\\t\\t0 0 0 1px rgba(0,0,0,0.4);\\n}\\n\\n/* Gradient buttons */\\n.btn-gradient {\\n\\ttext-decoration: none;\\n\\tcolor: white;\\n\\tpadding: 10px 30px;\\n\\tdisplay: inline-block;\\n\\tposition: relative;\\n\\tborder: 1px solid rgba(0,0,0,0.21);\\n\\tborder-bottom: 4px solid rgba(0,0,0,0.21);\\n\\tborder-radius: 4px;\\n\\ttext-shadow: 0 1px 0 rgba(0,0,0,0.15);\\n}\\n/* Gradient - ugly css is ugly */\\n.btn-gradient.cyan {\\n\\tbackground: rgba(27,188,194,1);\\n\\tbackground: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));\\n\\tbackground: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);\\n\\tbackground: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);\\n\\tbackground: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);\\n\\tbackground: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);\\n}\\n\\n.btn-gradient.red{ \\n\\tbackground: rgba(250,90,90,1);\\n\\tbackground: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));\\n\\tbackground: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);\\n\\tbackground: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);\\n\\tbackground: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);\\n\\tbackground: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );\\n}\\n.btn-gradient.orange {\\n\\tbackground: rgba(255,105,30,1);\\n\\tbackground: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));\\n\\tbackground: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);\\n\\tbackground: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);\\n\\tbackground: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);\\n\\tbackground: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);\\n}\\n.btn-gradient.blue {\\n\\tbackground: rgba(102,152,203,1);\\n\\tbackground: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);\\n\\tbackground: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));\\n\\tbackground: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);\\n\\tbackground: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);\\n\\tbackground: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);\\n\\tbackground: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );\\n}\\n.btn-gradient.purple { \\n\\tbackground: rgba(203,153,197,1);\\n\\tbackground: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);\\n\\tbackground: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));\\n\\tbackground: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);\\n\\tbackground: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);\\n\\tbackground: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);\\n\\tbackground: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );\\n}\\n.btn-gradient.yellow {\\n\\tbackground: rgba(240,210,100,1);\\n\\tbackground: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));\\n\\tbackground: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);\\n\\tbackground: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);\\n\\tbackground: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);\\n\\tbackground: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );\\n}\\n.btn-gradient.green {\\n\\tbackground: rgba(130,200,160,1);\\n\\tbackground: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);\\n\\tbackground: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));\\n\\tbackground: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);\\n\\tbackground: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);\\n\\tbackground: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);\\n\\tbackground: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );\\n}\\n\\n.btn-gradient.red:active \\t  {background: #E35252;}\\n.btn-gradient.orange:active {background: #E8601B;}\\n.btn-gradient.cyan:active \\t{background: #169499;}\\n.btn-gradient.blue:active \\t{background: #608FBF;}\\n.btn-gradient.purple:active {background: #BD8EB7;}\\n.btn-gradient.yellow:active {background: #DBC05B;}\\n.btn-gradient.green:active  {background: #72B08E;}\",\"js\":\"\\t$('a').click(function(event){\\n    event.preventDefault(); \\n\\t});\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":\"jquery\",\"created_at\":\"2013-10-15T18:49:11.000Z\",\"updated_at\":\"2013-12-07T19:36:49.000Z\",\"title\":\"Cool Buttons\",\"description\":\"Only tested in Chrome\",\"slug_hash\":\"tfhEg\",\"head\":\"<link href='https://fonts.googleapis.com/css?family=Lato:400,300italic' rel='stylesheet' type='text/css'>\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"prefixfree\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0141bd73-4858-797e-be6a-78b561a1359d\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-82f064ba69873842185f.js"}