https://github.com/rgglez/svelte-notoriuosbutton
A Svelte (3/4, 5) component to create a button with animated effects, to make it "notorious".
https://github.com/rgglez/svelte-notoriuosbutton
button-animation component marketing svelte svelte3 svelte5
Last synced: 14 days ago
JSON representation
A Svelte (3/4, 5) component to create a button with animated effects, to make it "notorious".
- Host: GitHub
- URL: https://github.com/rgglez/svelte-notoriuosbutton
- Owner: rgglez
- License: apache-2.0
- Created: 2026-06-03T09:44:15.000Z (25 days ago)
- Default Branch: main
- Last Pushed: 2026-06-03T10:06:26.000Z (25 days ago)
- Last Synced: 2026-06-03T12:06:59.838Z (25 days ago)
- Topics: button-animation, component, marketing, svelte, svelte3, svelte5
- Language: CSS
- Homepage:
- Size: 23.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-notoriousbutton
[](https://opensource.org/licenses/Apache-2.0)
[](https://github.com/rgglez/svelte-notoriuosbutton/releases/)
**svelte-notoriousbutton** is a Svelte button component with CSS-only visual
effects.
## Installation
```bash
npm install @rgglez/svelte-notoriousbutton
```
## Usage
### Svelte 3 / 4
```svelte
import NotoriousButton from '@rgglez/svelte-notoriousbutton/svelte4';
```
### Svelte 5
Bare import (default export points to Svelte 5):
```svelte
import NotoriousButton from '@rgglez/svelte-notoriousbutton';
```
Or explicit subpath:
```svelte
import NotoriousButton from '@rgglez/svelte-notoriousbutton/svelte5';
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | `'Click me'` | Button text |
| `effect` | `'sweep' \| 'glow' \| 'shake' \| 'pulse' \| 'border-sweep' \| ''` | `''` | Visual effect |
| `trigger` | `'hover' \| 'auto'` | `'hover'` | Fire effect on hover or continuously |
| `class` | `string` | `''` | Additional CSS classes |
| `style` | `string` | `''` | Inline styles |
## Effects
| Value | Description |
|-------|-------------|
| `sweep` | Glossy diagonal shine that slides across on hover |
| `glow` | Radial ring and brightness highlight on hover |
| `shake` | Vibration animation triggered on hover |
| `pulse` | Continuous breathing scale animation; pauses on hover |
| `border-sweep` | Conic-gradient light sweeps around the button border |
All effects are implemented in pure CSS — no JavaScript at runtime.
## Examples
```svelte
```
## CSS customization
Import the shared stylesheet directly to override variables:
```js
import '@rgglez/svelte-notoriousbutton/notorious-button.css';
```
The `.notorious-btn` class is applied to every button. Effect classes follow the
pattern `.effect-{name}`.
## Development
### Prerequisites
- Node.js
- npm
- git
### Makefile targets
| Target | Description |
|--------|-------------|
| `make tags` | List all git tags sorted by version |
| `make patch` | Bump the patch version, commit, tag, and push to origin |
| `make publish` | Publish the current version to npm |
| `make release` | Run `patch` then `publish` in one step |
Typical release flow:
```bash
# Review changes, then:
make release
```
This will:
1. Increment the patch version in `package.json` (e.g. `1.0.0` → `1.0.1`)
2. Commit `package.json` with message `chore: bump version to X.Y.Z`
3. Create git tag `vX.Y.Z`
4. Push branch and tag to origin
5. Run `npm publish --access public`
To publish without bumping the version:
```bash
make publish
```
To inspect existing tags:
```bash
make tags
```
## Example
You can try the example (Svelte 5) in the `example` directory. You can also view
a
[live example](https://svelte.dev/playground/04642e5a0de64dc7a4785e928ec12f18?version=5.56.1).
## Notes
* "[Notorious](https://www.youtube.com/watch?v=Z9z0e1Wm64M)" is a famous song by Duran Duran.
## License
Copyright 2026 Rodolfo González González.
Licensed under [Apache v2.0](https://www.apache.org/licenses/LICENSE-2.0)
license. Please read the [LICENSE](LICENSE) file.