Quick Buttons

Tutorial and small UI Kit for webflow designers.

01.
Everything starts from a default button

You can use class Button for Link Blocks, Divs, DOM elements.
 Selector: 
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
Small Size
Button
Small
Large Size
Button
Large

Additional Size

By default, buttons have display: inline-flex
To change their size use extra wrapper.
Wrapper width: 240px
Button
Navigator
Wrapper width: 80%
Button
Navigator

03.
What about icons?

Button can contains Icon and Text.
There can be several ways of arrangement.
Text First
Configuration
Button
Navigator
Icon First
Options
Button
Navigator
Icon Only
Button
Navigator
Icon Only, Circled
Button
Navigator

04.
C – is color

Using combo class affects button appearance.
 Selector: 
Button
+
Color Name
default
Button
Button
Button Black
Button
C Black
Button Grey
Button
C Grey
Button Green
Button
C Green
Button Red
Button
C Red
Button Orange
Button
C Orange
Button Yellow
Button
C Yellow
Button White
Button
C White
transparent
Transparent
Button
C Transparent

05.
Customise Examples

How to easily build a beautiful button.
Large orange button with icon
Scan QR Code
Button
C Orange
Large
Navigator
Circled button with icon only
Button
Large
Navigator
Green small button with icon and text
View Details
Button
C Green
Small
Navigator
Circled grey button with icon only
Button
C Grey
Navigator
White small button with text and icon
Add to Calendar
Button
C White
Small
Navigator
Large button with icon and text
Purchase
Button
Large
Navigator
small Circled orange button with icon only
Button
C Orange
Small
Navigator
Transparent button with icon and text
View Album
Button
C Transparent
Navigator

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
Button
default
Button 2
Button 2
Button 2
Button 3
Button 3
Button 3
Button 4
Button 4
Button 4

06.a
Button 2 – Styles

Outline rounded buttons

Size

 Selector: 
Button 2
+
Size
Button
Button 2
Small
Button
Button 2
Button Large
Button 2
Large

Colors

 Selector: 
Button 2
+
Color Name
Button
Button 2
Button Grey
Button 2
C Grey
Button Black
Button 2
C Black
transparent
Transparent
Button 2
C Transparent
Button Orange
Button 2
C Orange
Button White
Button 2
C White
Button Green
Button 2
C Green
Button Red
Button 2
C Red
Button Yellow
Button 2
C Yellow

06.b
Button 3 – Styles

Rectangle filled buttons

Size

 Selector: 
Button 3
+
Size
Button
Button 3
Small
Button
Button 3
Button Large
Button 3
Large

Colors

 Selector: 
Button 3
+
Color Name
default
Button
Button 3
Button Grey
Button 3
C Grey
Button Black
Button 3
C Black
Button Green
Button 3
C Green
Button Red
Button 3
C Red
Button Orange
Button 3
C Orange
Button Yellow
Button 3
C Yellow
Button White
Button 3
C White
transparent
Transparent
Button 3
C Transparent

06.c
Button 4 – Styles

Rectangle outline buttons

Size

 Selector: 
Button 4
+
Size
Button
Button 4
Small
Button
Button 4
Button Large
Button 4
Large

Colors

Outline buttons with tiny border radius.
 Selector: 
Button 4
+
Color Name
default
Button
Button 4
Button Grey
Button 4
C Grey
Button Black
Button 4
C Black
transparent
Transparent
Button 4
C Transparent
Button Orange
Button 4
C Orange
Button White
Button 4
C White
Button Green
Button 4
C Green
Button Red
Button 4
C Red
Button Yellow
Button 4
C Yellow

07.
More examples

How to easily build a beautiful button by choosing pre-made selectors
Large orange button with icon
Scan QR Code
Button 3
C Orange
Large
Navigator
Circled button with icon only
Button 4
Large
Navigator
Green small button with icon and text
View Details
Button 3
C Green
Small
Navigator
Circled grey button with icon only
Button 4
C Grey
Navigator
White small button with text and icon
Add to Calendar
Button 3
C White
Small
Navigator
Large button with icon and text
Purchase
Button 2
Large
Navigator
Circled orange button with icon only
Button 3
C Orange
Small
Navigator
Transparent button with icon and text
Show Album
Button 4
C Transparent
Navigator

In the next episode...
Buttons Group and more