Button Block

Good ol’ button, but better.

Demo

Ghost Button with Gradient Hover and Scale More Effect

2px border width, 4px border radius and button size is Normal

Ghost Button with Gradient Hover and Scale More Effect

2px border width, 4px border radius and button size is Normal

Features

<span style="color: #f34957;" class="ugb-highlight">7 Layouts</span>
5 Layouts

Basic. Spread. Full Width. Grouped 1. Grouped 2.

<span style="color: #f34957;" class="ugb-highlight">General Style Options</span>
Style Options

Design. Typography. Color. Gradient. Size. Border Radius. Padding. Button Hover Effects & Options. Icon.

<span style="color: #f34957;" class="ugb-highlight">Typography Options</span><br>
Typography Options

Font Family. Font Size & Weight. Transform. Line Height. Letter Spacing. HTML Tag.

<span style="color: #f34957;" class="ugb-highlight">Button Options</span>
Background Options

Color. Opacity. Image. Video. Fixed Image. Gradient. Blend Mode.

<span style="color: #f34957;" class="ugb-highlight">Spacing & Alignment</span>
Spacing & Alignment

Spacing. Horizontal & Vertical Alignment. Block Height. Content Width. Margin. Padding. Column Spacing. Z-Index.

<span style="color: #f34957;" class="ugb-highlight">Separators</span>
Separators

10 Designs. Responsive Height & Width. Two Additional Separator Layers for Premium.

<span style="color: #f34957;" class="ugb-highlight">Responsiveness</span>
Responsiveness

Font Size. Spacing. Separator Height. Advanced Settings.

2 Small Buttons with Icon

1 Basic button design, 1 Ghost button design, Small button size, Lift Hover effect and Leaf button icons

Large Gradient Full Width Basic Button

Grouped Buttons

Pre-set Designs

Want to give it a spin?