{
    "id": "bhaskar/sheen-outline-buttons",
    "kind": "component",
    "title": "Sheen Outline Buttons",
    "summary": "Outlined pill buttons with a glowing edge and a light sheen that sweeps across on hover. Three sizes including an icon-only round one.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/sheen-outline-buttons/",
    "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=\"bw\"><button class=\"sb\" type=\"button\">Continue <i>↗</i></button><button class=\"sb s\" type=\"button\"><i>✦</i> Generate</button><button class=\"sb r\" type=\"button\"><i>✦</i></button></div>",
        "css": ".bw{width:100%;height:100%;min-height:380px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.sb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:11px 22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.35);color:#fff;font:600 13px system-ui;cursor:pointer;box-shadow:inset 0 0 12px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.06);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,border-color .3s}.sb.s{padding:8px 14px;font-size:11px}.sb.r{width:34px;height:34px;padding:0;justify-content:center}.sb:before{content:\"\";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s}.sb:hover{transform:scale(1.05);border-color:#fff;box-shadow:inset 0 0 16px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.18)}.sb:hover:before{left:130%}.sb:active{transform:scale(.96)}.sb i{font-style:normal;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.sb:hover i{transform:translate(2px,-2px) rotate(8deg)}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}