{
    "id": "bhaskar/copy-action-swap",
    "kind": "component",
    "title": "Copy Action Swap",
    "summary": "Primary button that swaps its icon and label with a sliding transition to confirm an action, then returns on its own.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/copy-action-swap/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Buttons",
        "html": "<div class=\"as\"><button class=\"bt\" type=\"button\"><span class=\"vw\"><span class=\"st a\"><i>❐</i>Copy link</span><span class=\"st b\"><i>✓</i>Copied</span></span></button></div>",
        "css": ".as{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.bt{border:0;border-radius:99px;background:#0a84ff;color:#fff;padding:0 18px;height:38px;font:600 13px system-ui;cursor:pointer;transition:width .4s cubic-bezier(.3,1.3,.5,1),transform .2s,background .3s;width:124px;overflow:hidden}.bt:active{transform:scale(.95)}.bt.ok{width:112px;background:#22a45d}.vw{position:relative;display:block;height:38px}.st{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .4s cubic-bezier(.3,1.3,.5,1),opacity .25s,filter .3s;white-space:nowrap}.st i{font-style:normal}.st.b{transform:translateY(120%);opacity:0;filter:blur(3px)}.bt.ok .a{transform:translateY(-120%);opacity:0;filter:blur(3px)}.bt.ok .b{transform:none;opacity:1;filter:none}",
        "js": "(function(){var b=document.querySelector(\".bt\"),t=0;b.onclick=function(){b.classList.add(\"ok\");clearTimeout(t);t=setTimeout(function(){b.classList.remove(\"ok\")},1600)}})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}