HPB Elastic Buttons - Svg Elastic buttons

Requirements

Animations requiere Snap.svg

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>   

Installation

$ npm install hpb-elastic-buttons --save

Usage

Import in your module

import { ButtonComponent } from 'hpb-elastic-buttons/elastic-button/button.component';
import { ButtonLongComponent } from 'hpb-elastic-buttons/elastic-button-long/button.long.component';

@NgModule({
    declarations: [
        ...
        ButtonComponent,
        ButtonLongComponent,
        ...
    ],
    ...
})

Use as a directive

<elastic-button [btnText]="'Button'" [mainColor]="' #333444 '" (click)=" anyFunction() "></elastic-button>

or

<elastic-button [btnText]="varName" [mainColor]="' #333444 '" (click)=" anyFunction() "></elastic-button>

in your component

varName: string = 'Button';

Example with Ionicons*

varName: string = '<i class="icon ion-ios-checkmark-outline></i>"';

*requires

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Inputs

| Input | Default | Type | Required | | ------ | ------ | ------ | ------ | | mainColor | #6AB7FC | string | no | | btnText | - | string | yes |

Credits

This is an angular adaptation of codrops "Elastic elements" you can find it here

License

MIT