Introduction

WLR Button Library is a custom Button library designed to help developers create styled buttons for web projects. It offers various button sizes, states, and visual effects to enhance user interfaces. Developers can easily apply predefined classes to create buttons with different styles, including small, medium, and large sizes, as well as effects like scaling, rotation, shadow, and transformation. The library is built around a simple base class for buttons, and additional features are introduced through customizable classes, making it easy to integrate into any project. WLR Button Library is available via a CDN, enabling quick setup in web applications.

Button Effects: Several effects can be added to buttons, such as scaling, rotating, shadow, and transformation effects.
Responsive Design: The library adapts the layout of the navigation and content area for mobile devices, ensuring a mobile-friendly experience.
Flexible Button Sizing: Buttons can be resized by applying size-specific classes, offering flexibility in Button design.

How it Works

Access via CDN:

Add the following line to your HTML document:

<link rel="stylesheet" href="https://ui-library-65zn.onrender.com/WLR-UI-bundle.js">

Base Class

Creating a Button:

The WLR Button Library provides a base class called .btn, which applies basic styles such as padding and content alignment. By default, .btn elements have a transparent border and background, with no hover or focus styles applied.

<button class="btn"></button>

All buttons must include the class "btn" to work properly.

Button Sizes

Different button sizes can be applied by adding size-specific classes. The available size classes are:

btn-xsm - Extra Small
btn-sm - Small
btn-md - Medium
btn-lg - Large
btn-xlg - Extra Large

For example, to create a small button, use the following HTML:

<button class="btn btn-sm">Small Button</button>

This will render a standard small button:

Here are some other size examples:

Button Effects

You can add various effects to buttons by applying effect classes. Some of the available effects are:

btn-transform - Apply a transformation effect.
btn-scale - Scale the button.
btn-shadow - Add a shadow effect.
btn-rotate - Rotate the button.
btn-underline-border - Add an underline border.
btn-fill-color - Fill the button with color.

For example, to add a scale effect to a button, use the following HTML:

<button class="btn btn-lg btn-scale">Scale Button</button>

This will create a button with the scale effect:

Customizing Buttons

You can further customize buttons by applying inline CSS. For example:

<button class="btn btn-xlg" style="background: rgb(255, 38, 38);">Button</button>

This will render a button with a red background:

Popup buttons

I have recently added buttons that alow you to open a popup.

You can make a button that will open a popup.

<button class="btn btn-xlg" style="background: rgb(255, 38, 38);">Button</button>

This will open a popup:

Popup content

to add content inside of a popup,

You can make a button that will open a popup.

<button class="btn btn-xlg" style="background: rgb(255, 38, 38);">Button</button>

This will open a popup:

Popup types

There are 3 diffrent popup types

Onload

On click

On click dragable

<button class="btn btn-xlg" style="background: rgb(255, 38, 38);">Button</button>

This will open a popup:

All Components

Types:

<button class="btn btn-icon"><i class="fa fa-search"></i> Search</button>

<button class="btn btn-icon"><i class="fa fa-search"></i> Search</button>

<button class="btn btn-icon-only"><i class="fa fa-search"></i></button>

<button class="btn btn-block btn-lg">Full Width Button</button>

<button class="btn btn-outline btn-lg">Outline Button</button>

<button class="btn btn-disabled btn-lg" disabled>Disabled Button</button>

Sizes:

<button class="btn btn-xsm">Extra Small Button</button>

<button class="btn btn-sm">Small Button</button>

<button class="btn btn-md">Medium Button</button>

<button class="btn btn-lg">Large Button</button>

<button class="btn btn-xlg">Extra Large Button</button>

Effects:

<button class="btn btn-xsm">Extra Small Button</button>

<button class="btn btn-sm">Small Button</button>

<button class="btn btn-md">Medium Button</button>

<button class="btn btn-lg">Large Button</button>

<button class="btn btn-xlg">Extra Large Button</button>

<button class="btn btn-xlg">Extra Large Button</button>

About

Made by Will Ratkowski Github.

👋 Welcome!