TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

angular-particle-effect-button (demo)

Superb particle effect buttons for Angular 6.


This is a Angular 6 directive used as port of an awesome Codrops Article by Luis Manuel (original source).


npm i --save angular-particle-effect-button


Check out the Demo to see it in action.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ParticleEffectButtonModule } from "angular-particle-effect-button";
import { AppComponent } from "./app.component";

  declarations: [AppComponent],
  imports: [BrowserModule, ParticleEffectButtonModule],
  providers: [],
  bootstrap: [AppComponent]
export class AppModule {}
<button libParticleEffectButton [pHidden]="hidden" (click)="hidden=!hidden">Hide me</button>

Note that libParticleEffectButton can be added to anything from a simple <button> to a complex Angular subtree. The element for which you'll add libParticleEffectButton will be wrapped into a tree like that:

<div style="position: relative; display: inline-block;">
  <div style="position: relative; display: inline-block; overflow: hidden;">
    <button libparticleeffectbutton="">Hide me</button>
  <canvas style="position: absolute; pointer-events: none; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); display: none;">

Changing the hidden boolean property will trigger an animation, typically as a result of a click on the button's contents. If hidden changes to true, the button will perform a disintegrating animation. If hidden changes to false, it will reverse and reintegrate the original content.


Property Type Default Description
pHidden boolean false Whether button should be hidden or visible. Changing this property starts an animation.
pColor string '#000' Particle color. Should match the button content's background color
pDuration number 1000 Animation duration in milliseconds.
pEasing string 'easeInOutCubic' Animation easing.
pType string circle 'circle' or 'rectangle' or 'triangle'
pStyle string fill 'fill' or 'stroke'
pDirection string 'left' 'left' or 'right' or 'top' or 'bottom'
pCanvasPadding number 150 Amount of extra padding to add to the canvas since the animation will overflow the content's bounds
pSize number func random(4)
pSpeed number func random(2)
pParticlesAmountCoefficient number 3 Increases or decreases the relative number of particles
pOoscillationCoefficient number 30 Increases or decreases the relative curvature of particles
pBegin EventEmitter EventEmitter Callback to get notified when the animation starts.
pComplete EventEmitter EventEmitter Callback to get notified when the animation completes.

I've tried to keep the properties and behavior exactly the same as in the original codrops version.



This module was bootstrapped with angular-cli so it's using the common build/test/lint commands from angular-cli.


  • Build: ng build angular-particle-effect-button
  • Test: ng test angular-particle-effect-button
  • Lint: ng lint angular-particle-effect-button


  • See it in action: ng serve


MIT © danielpdev




npm i @sambaptista/angular-particle-effect-button

DownloadsWeekly Downloads






Unpacked Size

337 kB

Total Files


Last publish


  • sbaptista