H1 Heading

Outline Buttons

Text Buttons

Round Buttons

Round buttons have a 100% border radius. As text buttons, these are also known as pill buttons given their resemblance of a pill. Icon only buttons with 100% border-radius are ovals. Round buttons need plenty of space. Because their horizontal edges aren't straight they aren't too practical when displayed inline; they don't naturally align like bricks.

Contained Buttons

Outline Buttons

Text Buttons

Webflow Button Classes

round

Round buttons

Icon only

When it comes to icons in buttons, the key is not the icon size, but the icon container. This container should match the line height of your buttons text value, with 4px-6px padding.

Contained Buttons

Outline Buttons

Text Buttons

Webflow Button Classes

icon

Medium icon

small

small icon

large

Large icon

light

Inverse icon color

Icon and Text

Hey! Welcome to the Memorisely Buttons Webflow template. This template makes the most of Webflow's Button Element. It's designed to upskill you on the different button sizes, states, and types.

Contained Buttons

Play song

Outline Buttons

Play song

Text Buttons

Play song

Webflow Button Classes

with text

Icon with text margin

icon text

adjust padding with icon

CoLors

Text

font color - dark

#222222

font color - LIGHT

#d8d8d8

KPMP Brand

BRAND COLOR 1

#283c5e

BRAND COLOR 2

#008ea8

Accent colors

RED

#bb0606

Bright Blue

#0070c0

Orange

#F79000

Green

#29910D

GRAY

#787878

MEdium Gray

#AAAAAA

Light Gray

EEEEEE

Pale Blue

f2f7f9

LogoS

MAIN LOGO (long) Color

MAIN LOGO (Short) Color

MAIN LOGO (Stacked) Color

Webclip

MAIN LOGO (Long) WHITE

MAIN LOGO (Short) WHITE

MAIN LOGO (Stacked) WHITE

Favicon