Buttons as blocks

June 10, 2019 Master Admin Buttons 1

Advertisement Multi Website Builder Ad

Spis treści

Button types and shapes

Flat
Flat
Flat
Flat
Vista
Vista
Vista
Vista
Gradient
Gradient
Gradient
Gradient

Button with transparent background

Transparent Button

Button position

Not specified
Left (center on mobile)
Center (right on mobile)
Right (left on mobile)

Gradient directions

to bottom
to top
to right
to left
to top right
to top left
to bottom right
to bottom left

Mouse over background animations

From leftFrom left
From leftMove from the left
From RightFrom left
From RightMove from the left
From left 2From left
From left 2Move from the left
From Right 2From left
From Right 2Move from the left
Grow from middleGrow from middle
Grow from middleGrow from middle
Grow to middleGrow to middle
Grow to middleGrow to middle
Grow from bottomGrow from bottom
Grow from bottomGrow from bottom
Grow from topGrow from top
Grow from topGrow from top
Fade
Fade
Grow from middle circle
Grow from middle circle
Grow from cursor circle
Grow from cursor circle
As in customizer
As in customizer

Mouse over icon animations

Icon animation: move
Icon animation: move
Icon animation: move
Icon animation: move
Icon animation: move
Icon animation: fade right
Icon animation: fade right
Icon animation: fade right
Icon animation: fade right
Icon animation: fade right

Text transform

Always uppercase
Always lowercase
Each word has capital letter
No changes to texT

Border thickness and custom colors

Thin border
Thin border
Medium border
Medium border
Thick border
Thick border
Various borders and padding
Various borders and padding
Various borders and padding

Icons

on the left
on the left
on the left
on the right
on the right
on the right
on both sides
on both sides
on both sides

Shadow

No shadow
Shadow on hover only
No shadow on hover
Shadow changes on hover
Inner shadow

Expose

Standard expose button With icon
Wide expose button

Sizes

Small

with icon No icon

Normal

with icon No icon

Large

with icon No icon

X-Large

with icon no icon

XX-Large

with icon No icon

Different margins on desktop and mobile

Button Button with margins on each side

Special effects

Pulse

Pulse effect in default state, no effect on mouse over

Button
Quite a long Button this time
Button
Button
Button
Button

No effect in default state, pulse effect on mouse over

Button
Quite a long Button this time
Button
Button
Button
Button

Pulse effect no matter the state

Button
Quite a long Button this time
Button
Button
Button
Button

Pulse 2

Pulse2 effect in default state, no effect on mouse over

Button
Quite a long Button this time
Button
Button
Button
Button

No effect in default state, pulse2 effect on mouse over

Button
Quite a long Button this time
Button
Button
Button
Button

Pulse2 effect no matter the state

Button
Quite a long Button this time
Button
Button
Button
Button

Rate this article

★★★★★

Buttons as blocks 0 (0 votes)