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-button2. 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.
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.