{"id":20721106,"url":"https://github.com/francoisromain/postcss-button","last_synced_at":"2025-04-23T15:14:37.833Z","repository":{"id":7989873,"uuid":"56998377","full_name":"francoisromain/postcss-button","owner":"francoisromain","description":"A PostCSS plugin to create buttons.","archived":false,"fork":false,"pushed_at":"2023-01-03T15:14:11.000Z","size":1600,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T15:14:32.444Z","etag":null,"topics":["css","postcss","postcss-button","postcss-plugins"],"latest_commit_sha":null,"homepage":"http://francoisromain.github.io/postcss-button","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/francoisromain.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-24T23:05:11.000Z","updated_at":"2021-01-06T13:45:21.000Z","dependencies_parsed_at":"2023-01-13T14:35:53.346Z","dependency_job_id":null,"html_url":"https://github.com/francoisromain/postcss-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoisromain%2Fpostcss-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoisromain%2Fpostcss-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoisromain%2Fpostcss-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/francoisromain%2Fpostcss-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/francoisromain","download_url":"https://codeload.github.com/francoisromain/postcss-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250457792,"owners_count":21433734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","postcss","postcss-button","postcss-plugins"],"created_at":"2024-11-17T03:25:27.972Z","updated_at":"2025-04-23T15:14:37.806Z","avatar_url":"https://github.com/francoisromain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-button\n\n[![npm version][npm-img]][npm] [![Build Status][ci-img]][ci] [![Dependency Status][dep-img]][dep]\n\n[![NPM](https://nodei.co/npm/postcss-button.png)](https://nodei.co/npm/postcss-button/)\n\n[francoisromain.github.io/postcss-button][github.io]\n\nA [PostCSS] plugin to create buttons.\n\n[github.io]: http://francoisromain.github.io/postcss-button\n[postcss]: https://github.com/postcss/postcss\n[ci-img]: https://travis-ci.org/francoisromain/postcss-button.svg\n[ci]: https://travis-ci.org/francoisromain/postcss-button\n[npm-img]: https://badge.fury.io/js/postcss-button.svg\n[npm]: https://badge.fury.io/js/postcss-button\n[dep-img]: https://david-dm.org/francoisromain/postcss-button.svg\n[dep]: https://david-dm.org/francoisromain/postcss-button\n\n---\n\nThis plugin outputs a lot of the repetitive css code necessary to create clean buttons. It also uses `box-shadow` to create borders which does not break the vertical rhythm.\n\n---\n\n## Examples\n\nThere are two ways to declare a button:\n\n#### With specific declarations\n\n```css\n.my-button-class {\n  /* short-hand syntax example */\n\n  /* color: default | active | hover */\n  button-color: skyblue white white;\n\n  /* background-color: default | active | hover */\n  button-background: white skyblue silver;\n\n  /* border: size | default | active | hover */\n  button-border: 4px skyblue skyblue silver;\n\n  /* classes: active class name | disabled class name | apply classes and pseudo classes to the parent selector */\n  button-class: active disabled true;\n}\n```\n\n#### With a configuration\n\n```css\n@button my-button-name {\n  /* detailed-syntax example */\n\n  /* color */\n  button-color: orange;\n  button-color-active: white;\n  button-color-hover: white;\n\n  /* background-color */\n  button-background-color: white;\n  button-background-color-active: silver;\n  button-background-color-hover: orange;\n\n  /* border */\n  button-border-width: 1px;\n  button-border-color: silver;\n  button-border-color-active: silver;\n  button-border-color-hover: orange;\n\n  /* classes */\n  button-class-active: active;\n  button-class-disabled: disabled;\n  button-class-parent: true;\n}\n```\n\n```css\n.my-button-class {\n  button: my-button-name;\n}\n```\n\n01: [input](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/01.html), [demo](https://francoisromain.github.io/postcss-button/test/01.html)\n\n02: [input](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-button/blob/gh-pages/test/02.html), [demo](https://francoisromain.github.io/postcss-button/test/02.html)\n\n---\n\n## Installation\n\nInstall the [npm package](https://www.npmjs.com/package/postcss-button):\n\n```bash\nnpm install --save-dev postcss postcss-button\n```\n\nRequire the PostCSS plugin:\n\n```js\npostcss([require(\"postcss-button\")]);\n```\n\nSee [PostCSS docs](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, npm scripts…\n\n---\n\n## Usage\n\n#### With a configuration (optional)\n\n```css\n\n@button ([name]) {\n  /* name is a custom identifier to use multiple configurations.\n  If no name is provided, the default settings are overwritten */\n  [button-css-rules…]\n}\n\n.my-class {\n  button: [name];\n  /* use 'default' to apply the default settings */\n}\n```\n\n#### Without a configuration\n\n```css\n.my-class {\n  [button-css-rules…]\n}\n```\n\n## Css rules\n\n#### Color\n\n```css\n/* Button text color when active */\nbutton-color-active: [color];\n\n/* button text color on hover */\nbutton-color-hover: [color];\n\n/* short-hand syntax */\nbutton-color: [color] ([color-active]) ([color-hover]);\n```\n\n#### Background color\n\n```css\n/* button background color when active */\nbutton-background-active: [color];\n\n/* button background color on hover */\nbutton-background-hover: [color];\n\n/* short-hand syntax */\nbutton-background: [background-color] ([background-color-active])\n  ([background-color-hover]);\n```\n\n#### Border\n\n```css\n/* width and units of the border */\nbutton-border-width: [width];\n\n/* color of the border */\nbutton-border-color: [color];\n\n/* color of the border when active */\nbutton-border-color-active: [color];\n\n/* color of the border on hover */\nbutton-border-color-hover: [color];\n\n/* short-hand syntax */\nbutton-border: [border-width] ([border-color]) ([border-color-active])\n  ([border-color-hover]);\n```\n\n#### Classes\n\n```css\n/* class name to apply the active styles */\nbutton-class-active: [class-name];\n\n/* class name to apply the disabled styles */\nbutton-class-disabled: [class-name];\n\n/* apply the classes and pseudo elements\nto the parent element in the selector chain\nif it exists. (default to false)\n(See test 07 and 08) */\nbutton-class-parent: [boolean];\n\n/* short-hand syntax */\nbutton-class: [active] ([disabled]) ([parent]);\n```\n\nMissing declarations fallback to the [_default_ settings](https://github.com/francoisromain/postcss-button/blob/c5bf5e690f12bda8a2a353392dae50e22897e3b3/src/index.js#L93-L106).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancoisromain%2Fpostcss-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrancoisromain%2Fpostcss-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancoisromain%2Fpostcss-button/lists"}