{"id":18758458,"url":"https://github.com/homerchen19/react-linear-gradient-button","last_synced_at":"2026-03-04T11:32:27.072Z","repository":{"id":57333961,"uuid":"133217746","full_name":"homerchen19/react-linear-gradient-button","owner":"homerchen19","description":"React linear gradient button component.","archived":false,"fork":false,"pushed_at":"2018-05-23T08:14:21.000Z","size":567,"stargazers_count":14,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-04T13:50:56.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://xxhomey19.github.io/react-linear-gradient-button/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/homerchen19.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-13T08:10:31.000Z","updated_at":"2021-05-30T19:27:02.000Z","dependencies_parsed_at":"2022-08-29T14:30:51.973Z","dependency_job_id":null,"html_url":"https://github.com/homerchen19/react-linear-gradient-button","commit_stats":null,"previous_names":["xxhomey19/react-linear-gradient-button"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/homerchen19/react-linear-gradient-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homerchen19%2Freact-linear-gradient-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homerchen19%2Freact-linear-gradient-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homerchen19%2Freact-linear-gradient-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homerchen19%2Freact-linear-gradient-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/homerchen19","download_url":"https://codeload.github.com/homerchen19/react-linear-gradient-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/homerchen19%2Freact-linear-gradient-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30078992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T17:46:29.758Z","updated_at":"2026-03-04T11:32:27.047Z","avatar_url":"https://github.com/homerchen19.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/12113222/39959488-02d9f12a-5645-11e8-8a50-f6bcda5cdbbf.gif\" height=\"128\"\u003e\n  \u003ch3 align=\"center\"\u003ereact-linear-gradient-button\u003c/h3\u003e\n  \u003cp align=\"center\"\u003eReact linear gradient button component\u003c/p\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://npmjs.org/package/react-linear-gradient-button\" title=\"NPM version\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-linear-gradient-button.svg\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://travis-ci.com/xxhomey19/react-linear-gradient-button\" title=\"Build Status\"\u003e\u003cimg src=\"https://travis-ci.com/xxhomey19/react-linear-gradient-button.svg?branch=master\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://opensource.org/licenses/MIT\" title=\"License: MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#badge\"\u003e\n    \u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**[DEMO](https://xxhomey19.github.io/react-linear-gradient-button/)**\n\n## Install\n\n```\n$ npm install react-linear-gradient-button\n```\n\n## Usage\n\n```js\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport GradientButton from 'react-linear-gradient-button';\n\nclass Basic extends Component {\n  render() {\n    return \u003cGradientButton\u003eBUTTON\u003c/GradientButton\u003e;\n  }\n}\n\nReactDOM.render(\u003cBasic /\u003e, document.getElementById('root'));\n```\n\n## Features\n\n* No external CSS file.\n* Built with [**styled-components**](https://github.com/styled-components/styled-components) 💅\n\n## Props\n\n| Props                     |                          Type                          |     Default     | Description                                                                                                                                                                                                        |\n| :------------------------ | :----------------------------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children                  |                  `String` \\|\\| `Node`                  |  **Required**   | Content of the button.                                                                                                                                                                                             |\n| theme                     |                        `String`                        |   `\"Vanusa\"`    | Gradient theme from [uigradients](https://uigradients.com/).                                                                                                                                                       |\n| disabled                  |                         `Bool`                         |     `false`     | Should render a disabled button.                                                                                                                                                                                   |\n| gradient                  |                       `[String]`                       |     `null`      | Array of colors (e.g., `['#f00b47', '#0f6bb6']`, `[rgba(255,0,0,0), rgba(255,0,0,1)]`).\u003cbr /\u003e**NOTE**: this props has higher level then `theme`.                                                                   |\n| angle                     |                        `String`                        |    `\"right\"`    | The angle or direction of linear gradient (e.g., `\"bottom\"`, `\"30deg\"`).\u003cbr /\u003eCheck **Using Angles** section on [w3schools/css3_gradients](https://www.w3schools.com/css/css3_gradients.asp) for more information. |\n| padding                   | `Number` \\|\\| `String` \\|\\| `[Number]` \\|\\| `[String]` |      `10`       | The CSS `padding` argument of the button. Could be an array of four sides, just like CSS.\u003cbr /\u003eUnit is **px**.                                                                                                     |\n| borderRadius              |                        `Number`                        |      `20`       | The CSS `border-radius` argument of the button.\u003cbr /\u003eUnit is **px**.                                                                                                                                               |\n| borderWidth                |                        `Number`                        |       `2`       | The CSS `border-width` argument of the button.\u003cbr /\u003eUnit is **px**.                                                                                                                                                |\n| background                |                        `String`                        |    `\"#fff\"`     | The CSS `background-color` argument of the button.                                                                                                                                                                 |\n| color                     |                        `String`                        |   `\"#ae3560\"`   | The CSS `color` argument of the button.                                                                                                                                                                            |\n| fontSize                  |                        `Number`                        |      `16`       | The CSS `font-size` argument of the button.                                                                                                                                                                        |\n| transition                |                        `Object`                        |  See following  | The CSS `transition` argument of the button.                                                                                                                                                                       |\n| transition.property       |                        `String`                        |     `\"all\"`     | The CSS `transition-property` argument of the button.                                                                                                                                                              |\n| transition.duration       |                        `Number`                        |      `0.2`      | The CSS `transition-duration` argument of the button.\u003cbr /\u003eUnit is **second**.                                                                                                                                     |\n| transition.timingFunction |                        `String`                        | `\"ease-in-out\"` | The CSS `transition-timing-function` argument of the button.                                                                                                                                                       |\n| transition.delay          |                        `Number`                        |       `0`       | The CSS `transition-delay` argument of the button.\u003cbr /\u003eUnit is **second**.                                                                                                                                        |\n\n## License\n\nMIT © [xxhomey19](https://github.com/xxhomey19)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomerchen19%2Freact-linear-gradient-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhomerchen19%2Freact-linear-gradient-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhomerchen19%2Freact-linear-gradient-button/lists"}