genericButton.html

<template>
    <div style={buttonStyle}>
        <button class={currentClass} style={currentStyle}
            onclick={handleButtonClick}>&nbsp;&nbsp;&nbsp;{buttonLabel}&nbsp;&nbsp;&nbsp;</button></div>
</template>

genericButton.js

/* eslint-disable no-console */
import { LightningElement, api } from 'lwc';

export default class GenericButton extends LightningElement {
    @api buttonLabel;
    @api labelTextColor;
    @api buttonBackground;
    @api buttonBorder;
    @api urlTo;
    @api isExternalLink;
    @api buttonAlign;
    @api width;
    @api height;
    @api contentPaddingTop;
    @api contentPaddingBottom;
    @api contentPaddingLeft;
    @api contentPaddingRight;

    get currentStyle() {
        return `color: ${this.labelTextColor}; background-color: ${this.buttonBackground}; border: ${this.buttonBorder}; width:${this.width}; height:${this.height};`;
    }

    handleButtonClick(event) {
        if (this.isExternalLink) {
            window.open(this.urlTo);
        } else {
            window.open(this.urlTo, '_self');
        }
    }

    get buttonStyle() {
        return `text-align: ${this.buttonAlign}; `;
    }

    get currentClass() {
        let classNow = '';
        if (this.lineAlign) {
            classNow = classNow ? classNow + ' ' + this.lineAlign : this.lineAlign;
        }
        if (this.contentPaddingTop) {
            classNow = classNow ? classNow + ' ' + this.contentPaddingTop : this.contentPaddingTop;
        }
        if (this.contentPaddingBottom) {
            classNow = classNow ? classNow + ' ' + this.contentPaddingBottom : this.contentPaddingBottom;
        }
        if (this.contentPaddingLeft) {
            classNow = classNow ? classNow + ' ' + this.contentPaddingLeft : this.contentPaddingLeft;
        }
        if (this.contentPaddingRight) {
            classNow = classNow ? classNow + ' ' + this.contentPaddingRight : this.contentPaddingRight;
        }

        console.log('classnow', classNow);

        return ' slds-button wm-btn slds-m-bottom_large '+classNow;
    }
}

genericButton.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default,lightning__HomePage,lightning__RecordPage,lightning__AppPage">
            <property name="buttonLabel" type="String" label="Button label:" default="Label"/>
            <property name="labelTextColor" type="String" label="Button label color" default="#fff"/>
            <property name="buttonBackground" type="String" label="Button background color:" default="#e87722"/>
            <property name="buttonBorder" type="String" label="Button border property(ex: 5px solid red):" default="1px solid black"/>
            <property name="urlTo" type="String" label="Navigational url" default=""/>
            <property name="isExternalLink" type="Boolean" label="Open the link in a new tab?" default="false"/>
            <property name="buttonAlign" datasource=",center,left,right" type="String" label="Align content:"/>
            <property name="width" type="String" label="Weight"/>
            <property name="height" type="String" label="Height"/>
            <property name="contentPaddingTop" type="String" label="Select the top margin of the content: " default="" datasource=",slds-m-top_xx-small,slds-m-top_x-small,slds-m-top_small,slds-m-top_medium,slds-m-top_xx-medium,slds-m-top_xx-large,slds-m-top_x-large,slds-m-top_large"/>
            <property name="contentPaddingBottom" type="String" label="Select the bottom margin of the content: " default="" datasource=",slds-m-bottom_xx-small,slds-m-bottom_x-small,slds-m-bottom_small,slds-m-bottom_medium,slds-m-bottom_xx-medium,slds-m-bottom_xx-large,slds-m-bottom_x-large,slds-m-bottom_large"/>
            <property name="contentPaddingLeft" type="String" label="Select the left margin of the content: " default="" datasource=",slds-m-left_xx-small,slds-m-left_x-small,slds-m-left_small,slds-m-left_medium,slds-m-left_xx-medium,slds-m-left_xx-large,slds-m-left_x-large,slds-m-left_large"/>
            <property name="contentPaddingRight" type="String" label="Select the right margin of the content:" default="" datasource=",slds-m-right_xx-small,slds-m-right_x-small,slds-m-right_small,slds-m-right_medium,slds-m-right_xx-medium,slds-m-right_xx-large,slds-m-right_x-large,slds-m-right_large"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Generic and Configurable Button in LWC