Simple Superb Animations Particle Effect Buttons For Angular 9

Superb particle effect buttons for Angular directive used as a port of a wonderful Codrops article written by Luis Manuel.

particle button css, particles js examples, particle effects for buttons, javascript particles effect

How to make use of it:

Install

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

Usage

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

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

Read More – A Lightweight and Powerful Particle Animation Javascript Library | Proton.js

Note that the libParticleEffectButton can be added to anything from a simple <button> to a complex angular subtree.

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

Props

PropertyTypeDefaultDescription
pHiddenbooleanfalseWhether button should be hidden or visible. Changing this property starts an animation.
pColorstring‘#000’Particle color. Should match the button content’s background color
pDurationnumber1000Animation duration in milliseconds.
pEasingstring‘easeInOutCubic’Animation easing.
pTypestringcircle‘circle’ or ‘rectangle’ or ‘triangle’
pStylestringfill‘fill’ or ‘stroke’
pDirectionstring‘left’‘left’ or ‘right’ or ‘top’ or ‘bottom’
pCanvasPaddingnumber150Amount of extra padding to add to the canvas since the animation will overflow the content’s bounds
pSizenumberfuncrandom(4)
pSpeednumberfuncrandom(2)
pParticlesAmountCoefficientnumber3Increases or decreases the relative number of particles
pOoscillationCoefficientnumber30Increases or decreases the relative curvature of particles
pBeginEventEmitterEventEmitterCallback to get notified when the animation starts.
pCompleteEventEmitterEventEmitterCallback to get notified when the animation completes.

Particle Button For Angular, ng particle effect button Plugin/Github


See Demo And Download

Official Website(danielpdev): Click Here

This superior jQuery/javascript plugin is developed by danielpdev. For extra Advanced Usages, please go to the official website.

Share