1.0.0 • Public • Published


    A set of beautiful glassmorphism buttons for any react app

    NPM JavaScript Style Guide

    Glass Buttons - V1.0 Release 11/20/2021

    Author: Chris Benjamin

    Version: V1.0.0

    This is created as my first package to be published. This is a V1.0 release. Please report issues on github and I will resolve. I will make this open source and will accept pull requests.


    • Glassmorphism Buttons as React Components - Import anywhere in your react app
    • 11 Color Sets to Start just set variant prop to change colors
    • 5 Rounding Options - set rounding prop to change rounding
    • Default color - If you don't set, clear is used
    • Default rounding - 0.25rem if you don't set a rounding prop
    • Customizable button name - set the name prop to change the button text
    • Ready for import to any project

    How to install

    Run npm i glass-buttons to download and install the package Then import the package in any component by calling import GlassButton from 'glass-buttons' Then call the button with up to 3 customizable options <GlassButton variant="primary" name="Primary" roun/>

    How to use:

          <GlassButton variant="primary" name="primary" rounding="rounded-none"/> 
          <GlassButton variant="secondary" name="secondary" rounding="rounded-small"/>
          <GlassButton variant="danger" name="danger" rounding="rounded-large"/> 
          <GlassButton variant="success" name="success" rounding="rounded-xlarge"/> 
          <GlassButton variant="info" name="i" rounding="rounded-full"/> 

    The code above produces the following output:

    Glass Button Example

    You can use it just like any button component and add onClick()

    <GlassButton variant="primary" name="Primary" rounding="rounded-none" onClick={handleClick}/> 

    Button Variants (Colors)

    • Primary
    • Secondary
    • Danger
    • Success
    • Info
    • Light
    • Dark
    • Warning
    • Link
    • Default

    Button Name

    The name value is the text within the button. If none is specified the default is 'BUTTON'. By default the current version pushes .toUpperCase() on the button text.

    Styles - Rounding

    The following are valid styles and their applications. Rounded-small is default.

    Border Style Property
    rounded-none none;
    rounded-small 0.25rem;
    rounded-large 0.5rem;
    rounded-xlarge 1.5rem;
    rounded-full 9999px;

    These are applied by setting the rounded property when calling the library. <GlassButton variant="danger" name="Primary" rounding="rounded-large"/>

    The rounded-full is designed to be used along side an icon library for displaying a single character or icon.

    Text Color

    Text color is set to Inherit on all buttons except Dark, it's set to white. This can be overridden in css.

    Hover Effect

    All of the buttons have a hover effect that changes the opacity from 0.1 to 0.8. The exception is the Dark theme which changes the opacity from 0.8 to 0.1 on hover.


    You can override the styling of these buttons by calling the CSS class buttonComponent.

     .buttonComponent { margin-left: 20%;} 

    You can override a particular style by calling the CSS Class buttonComponentvariant where variant is changed to the name of the variant above such as .buttonComponentprimary {padding: 1rem}

    Examples with different backgrounds

    Glass Button with Tile Background

    Glass Button with Starry Night Background

    Glass Button with Light Background

    Glass Button with Dark Background


    MIT © cbenjamin2009




    npm i glass-buttons

    DownloadsWeekly Downloads






    Unpacked Size

    47 kB

    Total Files


    Last publish


    • _chrisbenjamin