styles

01.
Everything starts from a default button

You can use class Button for Link Blocks, Divs, DOM elements.

Selector:

Button

Button

Height

Using height instead of padding-top, padding bottom to setup buttons default size

Transitions

Using text, background and border-color for tiny animation

States

Blue by default. Has :hover :pressed and :focus* states. *Outline turned off.

02.
What about sizes?

Using combo class affects font-size, height and padding

Selector:

Button

+

Size

Button

Small

Button

Large

Additional Size

By default, buttons have display: inline-flex
To change their size use extra wrapper.

Wrapper width: 240px

Button

Navigator

Button Wrapper

Button

Text Block

Wrapper width: 80%

Button

Navigator

Button Wrapper

Button

Text Block

03.
What about icons?

Button can contains Icon and Text.
There can be several ways of arrangement.

Text First

Button

Navigator

Button

Text Block

Button Icon

Icon First

Button

Navigator

Button

Button Icon

Text Block

Icon Only

Button

Navigator

Button

Button Icon

Icon Only, Circled

Button

Navigator

Button

Button Icon

Icon Only

04.
C – is color

Using combo class affects button appearance.

Selector:

Button

+

Color Name

default

Button

Button

C Black

Button

C Grey

Button

C Green

Button

C Red

Button

C Orange

Button

C Yellow

Button

C White

transparent

Button

C Transparent

05.
Customise Examples

How to easily build a beautiful button.

Large orange button with icon

Button

C Orange

Large

Navigator

Button

C Orange

Large

Text Block

Button Icon

Circled button with icon only

Button

Large

Navigator

Button

Large

Button Icon

Icon Only

Green small button with icon and text

Button

C Green

Small

Navigator

Button

C Green

Small

Button Icon

Text Block

Circled grey button with icon only

Button

C Grey

Navigator

Button

C Grey

Button Icon

Icon Only

White small button with text and icon

Add to Calendar

Button

C White

Small

Navigator

Button

C White

Small

Text Block

Button Icon

Large button with icon and text

Button

Large

Navigator

Button

Large

Button Icon

Text Block

small Circled orange button with icon only

Button

C Orange

Small

Navigator

Button

C Orange

Small

Button Icon

Icon Only

Transparent button with icon and text

Button

C Transparent

Navigator

Button

C Transparent

Button Icon

Text Block

06.
Button Styles

Well, now we know how to create a button.
And, if we need new styles...
Just create a new Button class.

Button

default

Button 2

Button 2

Button 3

Button 3

Button 4

Button 4

06.^a
Button 2 – Styles

Outline rounded buttons

Size

Selector:

Button 2

+

Size

Button 2

Small

Button 2

Button 2

Large

Colors

Selector:

Button 2

+

Color Name

Button 2

Button 2

C Grey

Button 2

C Black

transparent

Button 2

C Transparent

Button 2

C Orange

Button 2

C White

Button 2

C Green

Button 2

C Red

Button 2

C Yellow

06.^b
Button 3 – Styles

Rectangle filled buttons

Size

Selector:

Button 3

+

Size

Button 3

Small

Button 3

Button 3

Large

Colors

Selector:

Button 3

+

Color Name

default

Button 3

Button 3

C Grey

Button 3

C Black

Button 3

C Green

Button 3

C Red

Button 3

C Orange

Button 3

C Yellow

Button 3

C White

transparent

Button 3

C Transparent

06.^c
Button 4 – Styles

Rectangle outline buttons

Size

Selector:

Button 4

+

Size

Button 4

Small

Button 4

Button 4

Large

Colors

Outline buttons with tiny border radius.

Selector:

Button 4

+

Color Name

default

Button 4

Button 4

C Grey

Button 4

C Black

transparent

Button 4

C Transparent

Button 4

C Orange

Button 4

C White

Button 4

C Green

Button 4

C Red

Button 4

C Yellow

07.
More examples

How to easily build a beautiful button by choosing pre-made selectors

Large orange button with icon

Button 3

C Orange

Large

Navigator

Button 3

C Orange

Large

Text Block

Button Icon

Circled button with icon only

Button 4

Large

Navigator

Button 4

Large

Button Icon

Icon Only

Green small button with icon and text

Button 3

C Green

Small

Navigator

Button 3

C Green

Small

Button Icon

Text Block

Circled grey button with icon only

Button 4

C Grey

Navigator

Button 4

C Grey

Button Icon

Icon Only

White small button with text and icon

Add to Calendar

Button 3

C White

Small

Navigator

Button 3

C White

Small

Text Block

Button Icon

Large button with icon and text

Button 2

Large

Navigator

Button 2

Large

Button Icon

Text Block

Circled orange button with icon only

Button 3

C Orange

Small

Navigator

Button 3

C Orange

Small

Button Icon

Icon Only

Transparent button with icon and text

Button 4

C Transparent

Navigator

Button 4

C Transparent

Button Icon

Text Block

In the next episode...
Buttons Group and more

01.
How to make modal / popup in webflow with attributes

You can use any element to trigger a popup via custom attributes and JS

Leave a Message

Custom Attribute

modal-open:"name"

Custom Attribute

modal:"name"

Structure

Modal
— Modal Wrap
— — Modal Content

02.
JS Code

<script>
  document.addEventListener('click', (event) => {
    const openTrigger = event.target.closest('[modal-open]');
    const modal = event.target.closest('.modal');
    const modalContent = event.target.closest('.modal-content');

    // Open modal
    if (openTrigger) {
      event.preventDefault();
      const modalName = openTrigger.getAttribute('modal-open');
      const modalWrap = document.querySelector(`.modal[modal="${modalName}"]`);
      if (modalWrap) {
        modalWrap.style.display = 'block';
        document.body.style.overflow = 'hidden'; // Lock body scroll
      }
    }

    // Close modal when clicking outside modal content
    if (modal && !modalContent) {
      modal.style.display = 'none';
      document.body.style.overflow = ''; // Reset body
    }
  });
</script>

02.
Video Tutorial