'); } // -->
Quick
Buttons
Tutorial and small UI Kit for webflow designers.
Clone in Weblow
Buttons Table
v.1.0.0
Start
Scan QR Code
Options
Deactivate
Menu
Add to Calendar
Remove All
Take a photo
Start the Journey
Save for later
Filter
New Folder
View Details
Purchase
Mute
Edit
Sort
Hide
Favorites
Menu
01.
Everything starts from a default button
You can use class
Button
for Link Blocks, Divs, DOM elements.
Selector:
Button
The 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
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
Take a photo
Button
Navigator
Button Wrapper
Button
Text Block
Wrapper width: 80%
Scan QR Code
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
Configuration
Button
Navigator
Button
Text Block
Button Icon
Icon First
Options
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
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
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
View Details
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
Purchase
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
View Album
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
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
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
View Details
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
Purchase
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
Show Album
Button 4
C Transparent
Navigator
Button 4
C Transparent
Button Icon
Text Block
In the next episode...
Buttons Group and more
File
Edit
Help
File
Edit
Help
Animate