angular-hover-gradient-button/esm2022/lib/angular-hover-gradient-button.component.mjs

The Angular Hover Gradient Button is a customizable, easy-to-use Angular button with a hover gradient effect on hover.

import { CommonModule } from '@angular/common';
import { Component, HostBinding, Input, ViewChild, } from '@angular/core';
import * as i0 from "@angular/core";
export class AngularHoverGradientButton {
    get bg() {
        return this.backgroundColor;
    }
    get hover() {
        return this.hoverColor;
    }
    constructor() {
        this.backgroundColor = '#1e3799';
        this.hoverColor = '#78e08f';
    }
    onMouseMove(event) {
        const rect = this.button.nativeElement.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        this.button.nativeElement.style.setProperty('--x', `${x}px`);
        this.button.nativeElement.style.setProperty('--y', `${y}px`);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: AngularHoverGradientButton, isStandalone: true, selector: "angular-hover-gradient-button", inputs: { backgroundColor: "backgroundColor", hoverColor: "hoverColor" }, host: { properties: { "style.--background-color": "this.bg", "style.--hover-color": "this.hover" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button class=\"button\" (mousemove)=\"onMouseMove($event)\" #button>\n  <div class=\"icon-container\">\n    <ng-content select=\"[slot='left']\"></ng-content>\n  </div>\n  <span><ng-content></ng-content></span>\n  <div class=\"icon-container\">\n    <ng-content select=\"[slot='right']\"></ng-content>\n  </div>\n</button>\n", styles: [":root{--button-color: white;--button-padding: 1em;--button-border-radius: 5px;--button-border: none;--button-font-size: 1.2em}button{display:inline-flex;align-items:center;position:relative;gap:10px;width:auto;appearance:none;background-color:var(--background-color, #5f27cd);padding:var(--button-padding, 1em);border:var(--button-border, none);color:var(--button-color, white);font-size:var(--button-font-size, 1.2em);cursor:pointer;outline:none;overflow:hidden;border-radius:var(--button-border-radius, 5px);z-index:1;justify-content:center;gap:20px}.icon-container{display:flex;align-items:center;z-index:3}button span{display:inline-flex;align-items:center;pointer-events:none;z-index:3}button:before{--size: 0;content:\"\";position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,var(--hover-color),transparent);transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:0}button:hover:before{--size: 400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: AngularHoverGradientButton, decorators: [{
            type: Component,
            args: [{ selector: 'angular-hover-gradient-button', standalone: true, imports: [CommonModule], template: "<button class=\"button\" (mousemove)=\"onMouseMove($event)\" #button>\n  <div class=\"icon-container\">\n    <ng-content select=\"[slot='left']\"></ng-content>\n  </div>\n  <span><ng-content></ng-content></span>\n  <div class=\"icon-container\">\n    <ng-content select=\"[slot='right']\"></ng-content>\n  </div>\n</button>\n", styles: [":root{--button-color: white;--button-padding: 1em;--button-border-radius: 5px;--button-border: none;--button-font-size: 1.2em}button{display:inline-flex;align-items:center;position:relative;gap:10px;width:auto;appearance:none;background-color:var(--background-color, #5f27cd);padding:var(--button-padding, 1em);border:var(--button-border, none);color:var(--button-color, white);font-size:var(--button-font-size, 1.2em);cursor:pointer;outline:none;overflow:hidden;border-radius:var(--button-border-radius, 5px);z-index:1;justify-content:center;gap:20px}.icon-container{display:flex;align-items:center;z-index:3}button span{display:inline-flex;align-items:center;pointer-events:none;z-index:3}button:before{--size: 0;content:\"\";position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle closest-side,var(--hover-color),transparent);transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:0}button:hover:before{--size: 400px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { button: [{
                type: ViewChild,
                args: ['button']
            }], bg: [{
                type: HostBinding,
                args: ['style.--background-color']
            }], hover: [{
                type: HostBinding,
                args: ['style.--hover-color']
            }], backgroundColor: [{
                type: Input
            }], hoverColor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1ob3Zlci1ncmFkaWVudC1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1ob3Zlci1ncmFkaWVudC1idXR0b24vc3JjL2xpYi9hbmd1bGFyLWhvdmVyLWdyYWRpZW50LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWhvdmVyLWdyYWRpZW50LWJ1dHRvbi9zcmMvbGliL2FuZ3VsYXItaG92ZXItZ3JhZGllbnQtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsU0FBUyxFQUVULFdBQVcsRUFDWCxLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDOztBQVN2QixNQUFNLE9BQU8sMEJBQTBCO0lBRXJDLElBQTZDLEVBQUU7UUFDN0MsT0FBTyxJQUFJLENBQUMsZUFBZSxDQUFDO0lBQzlCLENBQUM7SUFDRCxJQUF3QyxLQUFLO1FBQzNDLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBS0Q7UUFIUyxvQkFBZSxHQUFXLFNBQVMsQ0FBQztRQUNwQyxlQUFVLEdBQVcsU0FBUyxDQUFDO0lBRXpCLENBQUM7SUFFaEIsV0FBVyxDQUFDLEtBQWlCO1FBQzNCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFDL0QsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3BDLE1BQU0sQ0FBQyxHQUFHLEtBQUssQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUVuQyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDN0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQy9ELENBQUM7OEdBckJVLDBCQUEwQjtrR0FBMUIsMEJBQTBCLDJXQ2hCdkMsdVVBU0EseWlDREdZLFlBQVk7OzJGQUlYLDBCQUEwQjtrQkFQdEMsU0FBUzsrQkFDRSwrQkFBK0IsY0FDN0IsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDO3dEQUtGLE1BQU07c0JBQTFCLFNBQVM7dUJBQUMsUUFBUTtnQkFDMEIsRUFBRTtzQkFBOUMsV0FBVzt1QkFBQywwQkFBMEI7Z0JBR0MsS0FBSztzQkFBNUMsV0FBVzt1QkFBQyxxQkFBcUI7Z0JBSXpCLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYW5ndWxhci1ob3Zlci1ncmFkaWVudC1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2FuZ3VsYXItaG92ZXItZ3JhZGllbnQtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYW5ndWxhci1ob3Zlci1ncmFkaWVudC1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQW5ndWxhckhvdmVyR3JhZGllbnRCdXR0b24ge1xuICBAVmlld0NoaWxkKCdidXR0b24nKSBidXR0b24hOiBFbGVtZW50UmVmO1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLi0tYmFja2dyb3VuZC1jb2xvcicpIGdldCBiZygpIHtcbiAgICByZXR1cm4gdGhpcy5iYWNrZ3JvdW5kQ29sb3I7XG4gIH1cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS4tLWhvdmVyLWNvbG9yJykgZ2V0IGhvdmVyKCkge1xuICAgIHJldHVybiB0aGlzLmhvdmVyQ29sb3I7XG4gIH1cblxuICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3I6IHN0cmluZyA9ICcjMWUzNzk5JztcbiAgQElucHV0KCkgaG92ZXJDb2xvcjogc3RyaW5nID0gJyM3OGUwOGYnO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBvbk1vdXNlTW92ZShldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGNvbnN0IHJlY3QgPSB0aGlzLmJ1dHRvbi5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IHggPSBldmVudC5jbGllbnRYIC0gcmVjdC5sZWZ0O1xuICAgIGNvbnN0IHkgPSBldmVudC5jbGllbnRZIC0gcmVjdC50b3A7XG5cbiAgICB0aGlzLmJ1dHRvbi5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KCctLXgnLCBgJHt4fXB4YCk7XG4gICAgdGhpcy5idXR0b24ubmF0aXZlRWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS15JywgYCR7eX1weGApO1xuICB9XG59XG4iLCI8YnV0dG9uIGNsYXNzPVwiYnV0dG9uXCIgKG1vdXNlbW92ZSk9XCJvbk1vdXNlTW92ZSgkZXZlbnQpXCIgI2J1dHRvbj5cbiAgPGRpdiBjbGFzcz1cImljb24tY29udGFpbmVyXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3Nsb3Q9J2xlZnQnXVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIDxzcGFuPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwYW4+XG4gIDxkaXYgY2xhc3M9XCJpY29uLWNvbnRhaW5lclwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzbG90PSdyaWdodCddXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvYnV0dG9uPlxuIl19