BurgtonButton

Introduction

<burgton-button> is a small customisable lit-element burger button that you can use in your projects.

Amongst other features, it allows you to choose from different animations, customise colors, animation speed and event toggle classes on multiple targets on the page.

Getting started

You can use the <burgton-button> element on your project in 3 simple steps:

1. Install the <burgton-button> on your project via NPM (or download it here)

npm install burgton-button

2. Import the <burgton-button> module on your project

<script type="module" src="node_modules/burgton-button/index.js"></script>

3. Add the <burgton-button> element to your page and customize to your taste

<burgton-button type="astronaut"></burgton-button>

Examples

On the API Section you can see how to customize your button, but here are some examples so you can see all the possible button types.

Default
Arrow Left
Arrow Right
Arrow to arrow
Astronaut
Async
Crossed
Ellipsis
Fall down
Minus
Rotator
Spin
Underlined
Vertical Rotator
Zoom

API

Looking for how to customize your <burgton-button>? You came to the right place...

Attributes

You can use some attributes to customize your <burgton-button>

Attribute

Description

Valid Values

Default

type

Defines the button animation

'default', 'arrow-left', 'arrow-right', 'arrow-to-arrow', 'astronaut', 'async', 'crossed', 'ellipsis', 'fall-down', 'minus', 'rotator', 'spin', 'underlined', 'vertical-rotator', 'zoom'

'default'

<burgton-button type="astronaut"></burgton-button>

Attribute

Description

Valid Values

Default

label

Defines the text that will be show with the button

String

-

<burgton-button label="Menu"></burgton-button>

Attribute

Description

Valid Values

Default

labelPosition

Defines the position of the label text in relation to the button

'top', 'bottom', 'right', 'left'

-

<burgton-button label="Menu" labelPosition="top"></burgton-button>

Attribute

Description

Valid Values

Default

targetSelectors

Defines on which elements you want to toggle a class when the button is clicked. You can select multiple elements by separating the selectors with a comma

CSS Selector

-

<burgton-button targetSelectors="#circle-one, .circle-two" targetClasses="active, colorful"></burgton-button>

Attribute

Description

Valid Values

Default

targetClasses

Defines the class that will be toggled on the selected element. The number of classes must match the number of selectors

CSS Selector

-

<burgton-button targetSelectors="#circle-three" targetClasses="active"></burgton-button>

Attribute

Description

Valid Values

Default

description

Defines the default text for the aria-label attribute. This value will be overwritten with the label Text (if present)

String

'Menu button'

<burgton-button description="Menu on/off button"></burgton-button>

Attribute

Description

Valid Values

Default

noAnimation

Disables the button animation, making the transition between inactive and active states immediate

-

-

<burgton-button noAnimation></burgton-button>

Styles

<burgton-button> exposes several CSS custom properties that you can use to further customize it.

Property

Description

Valid Values

Default

--burgton-button-line-color

Set the color of the button lines.

CSS color value

#66cc99

--burgton-button-line-color: tomato;

Property

Description

Valid Values

Default

--burgton-button-line-color-active

Set the color of the button lines when it is active

CSS color value

#66cc99

--burgton-button-line-color-active: purple;

Property

Description

Valid Values

Default

--burgton-button-animation-duration

Set the animation duration

CSS time value

500ms

--burgton-button-animation-duration: .75s;

Property

Description

Valid Values

Default

--burgton-button-easing

Set the animation easing

CSS easing value

ease-in-out

--burgton-button-easing: ease-out;

Property

Description

Valid Values

Default

--burgton-button-scale

Set the button scale (size)

Number (multiplier)

1

--burgton-button-scale: 1.3;

Property

Description

Valid Values

Default

--burgton-button-border-radius

Set the button lines border-radius

CSS border-radius value

0px

--burgton-button-border-radius: 2px;

Property

Description

Valid Values

Default

--burgton-button-label-font-size

Set the font size for the label text

CSS font-size value

14px

--burgton-button-label-font-size: 1rem;

Property

Description

Valid Values

Default

--burgton-button-label-font-color

Set the font color for the label text

CSS color value

#999999

--burgton-button-label-font-color: white;

Property

Description

Valid Values

Default

--burgton-button-label-font-color-active

Set the font color for the label text when the button is active

CSS color value

#999999

--burgton-button-label-font-color-active: purple;

Property

Description

Valid Values

Default

--burgton-button-label-font-weight

Set the font weight for the label text when the button is active

CSS font-weight value

inherit

--burgton-button-label-font-weight: 600;

Property

Description

Valid Values

Default

--burgton-button-label-text-transform

Set the text-transform for the label text when the button is active

CSS text-transform value

uppercase

--burgton-button-label-text-transform: capitalize;

Methods

<burgton-button> exposes several methods which you can call from your application.

Method

Description

.toggleState()

Toggle between the button's active and inactive state

yourButton.toggleState();

Method

Description

.activate()

Activate the button

yourButton.activate();

Method

Description

.deactivate()

Deactivate the button

yourButton.deactivate();

Events

<burgton-button> fires several custom events so you can react to them on your application.

Event

Description

burgton-button-state-change

Fires whenever the button's state changes

Event

Description

burgton-button-click

Fires whenever the button is clicked

Event

Description

burgton-button-activate

Fires whenever the button state becomes active

Event

Description

burgton-button-deactivate

Fires whenever the button state becomes inactive

A11y

Accessibility is very important, so we try to implement some good practices to reach as many users as possible and provide them with a good experience.

We do this mainly by adding several relevant aria attributes to the button and also by giving you the possibility to change them via attributes.

Contributing

If you have any ideas, suggestions or questions, you can contact us on our Github Page.

You can also find the burgton-buttons package on NPM.

Made with ♥ by Boguz