Default:
|
LAYOUT 1
|
LAYOUT 2
|
Examples:
Example 1:
Get Stunning Call-to-Action Buttons
that will make your visitors Click!
How did we make it:
- Layout 1 / Hover effect (1)
- Text color normal (#FFFFFF) / Text color hover (#A2CAA4) / Font Size (16) / Font weight (normal)
- BG color normal (#A2CAA4) / BG color hover (#FFFFFF)
- Border color normal (#696969) / Border color hover (#A2CAA4) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (75)
- Layout 1 / Hover effect (1)
- Text color normal (#FFFFFF) / Text color hover (#A2CAA4) / Font Size (16) / Font weight (normal)
- BG color normal (#A2CAA4) / BG color hover (#FFFFFF)
- Border color normal (#696969) / Border color hover (#A2CAA4) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (75)
Example 2:
62 Apple Watch mockups
Customized viewer brings the advantage of interactive 3D-enabled viewing and helps you easily find mockup
you need among 62 others |
|
How did we make it:
- Layout 1 / Hover effect (6) / Round (On)
- Text color normal (#FDB32B) / Text color hover (#FFFFFF) / Font Size (14) / Font weight (normal)
- BG color normal (#FFFFFF) / BG color hover (#FDB32B)
- Border color normal (#FDB32B) / Border color hover (#FDB32B) / Border Size (3) / Border style (Solid)
- Padding: Vertical (15) / Horizontal (60)
- Layout 1 / Hover effect (6) / Round (On)
- Text color normal (#FDB32B) / Text color hover (#FFFFFF) / Font Size (14) / Font weight (normal)
- BG color normal (#FFFFFF) / BG color hover (#FDB32B)
- Border color normal (#FDB32B) / Border color hover (#FDB32B) / Border Size (3) / Border style (Solid)
- Padding: Vertical (15) / Horizontal (60)
Example 3:
How did we make it:
- Layout 1 / Hover effect (2)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (16) / Font weight (bold)
- BG color normal (#39c803) / BG color hover (#2A2A2A)
- Border color normal (#2A2A2A) / Border color hover (#2A2A2A) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (45)
- Layout 1 / Hover effect (2)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (16) / Font weight (bold)
- BG color normal (#39c803) / BG color hover (#2A2A2A)
- Border color normal (#2A2A2A) / Border color hover (#2A2A2A) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (45)
Example 4:
|
START YOUR
|
How did we make it:
Button 1:
- Layout 1 / Hover effect (2)
- Text color normal (#8D2424) / Text color hover (#FFFFFF) / Font Size (16) / Font weight (bold)
- BG transparent normal (On) / BG color hover (#8D2424)
- Border color normal (#8D2424) / Border color hover (#8D2424) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (20)
Button 2:
- Layout 1 / Hover effect (1)
- Text color normal (#2A2A2A) / Text color hover (#0083DD) / Font Size (16) / Font weight (normal)
- BG transparent normal (On) / BG transparent hover (On)
- Border style (None)
- Padding: Vertical (15) / Horizontal (20)
Button 1:
- Layout 1 / Hover effect (2)
- Text color normal (#8D2424) / Text color hover (#FFFFFF) / Font Size (16) / Font weight (bold)
- BG transparent normal (On) / BG color hover (#8D2424)
- Border color normal (#8D2424) / Border color hover (#8D2424) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (20)
Button 2:
- Layout 1 / Hover effect (1)
- Text color normal (#2A2A2A) / Text color hover (#0083DD) / Font Size (16) / Font weight (normal)
- BG transparent normal (On) / BG transparent hover (On)
- Border style (None)
- Padding: Vertical (15) / Horizontal (20)
Example 5:
ADVANCED BARTENDER COURSES
|
This July, Our Advanced Bartender Courses will open its doors!
|
|
How did we make it:
- Layout 1 / Hover effect (5) / Round (On)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (14) / Font weight (normal)
- BG color normal (#0083DD) / BG color hover (#9BD6FF)
- Border color normal (#9BD6FF) / Border color hover (#0083DD) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (40)
- Layout 1 / Hover effect (5) / Round (On)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (14) / Font weight (normal)
- BG color normal (#0083DD) / BG color hover (#9BD6FF)
- Border color normal (#9BD6FF) / Border color hover (#0083DD) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (40)
Example 6:
Shop without worries with PayPal Refunded Returns Service.
Receive up to 3 refunds for eligible purchases, up to $20 USD each. Activate now and start shopping online with more confidence.
GET STARTED FOR FREE
How did we make it:
- Layout 2 / Hover effect (1)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (18) / Font weight (normal)
- BG color normal (#C71432) / BG color hover (#333333)
- Border color normal (#C71432) / Border color hover (#C71432) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (Off) / BG color (#111111)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (28) / Title Font weight (normal)
- Text color (#FFFFFF) / Text size (15) / Text Font weight (normal)
- Layout 2 / Hover effect (1)
- Text color normal (#FFFFFF) / Text color hover (#FFFFFF) / Font Size (18) / Font weight (normal)
- BG color normal (#C71432) / BG color hover (#333333)
- Border color normal (#C71432) / Border color hover (#C71432) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (Off) / BG color (#111111)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (28) / Title Font weight (normal)
- Text color (#FFFFFF) / Text size (15) / Text Font weight (normal)
Example 7:
The Easiest Way to Make a Website
It's surprisingly easy to create your own website, blog or online store.
TRY IT FREE
How did we make it:
- Layout 2 / Hover effect (2)
- Text color normal (#FFFFFF) / Text color hover (#0083DD) / Font Size (20) / Font weight (bold)
- BG color normal (#0083DD) / BG color hover (#88CDE4)
- Border color normal (#0083DD) / Border color hover (#88CDE4) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (Off) / Show BG image (On) - Upload your BG image / BG color (#88CDE4)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (28) / Title Font weight (normal)
- Text color (#FFFFFF) / Text size (15) / Text Font weight (normal)
- Use Spacer element to make additional padding
- Layout 2 / Hover effect (2)
- Text color normal (#FFFFFF) / Text color hover (#0083DD) / Font Size (20) / Font weight (bold)
- BG color normal (#0083DD) / BG color hover (#88CDE4)
- Border color normal (#0083DD) / Border color hover (#88CDE4) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (Off) / Show BG image (On) - Upload your BG image / BG color (#88CDE4)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (28) / Title Font weight (normal)
- Text color (#FFFFFF) / Text size (15) / Text Font weight (normal)
- Use Spacer element to make additional padding
Example 8:
|
SALE TO
75%
ON BLACK FRIDAY
|
VIEW THE COLLECTION NOW
How did we make it:
- Layout 2 / Hover effect (3)
- Text color normal (#111111) / Text color hover (#FFFFFF) / Font Size (18) / Font weight (normal)
- BG color normal (#FFFFFF) / BG color hover (#111111)
- Border color normal (#111111) / Border color hover (#111111) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (On) / Show BG image (On) - Upload your BG image / BG color (#111111)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (40) / Title Font weight (bold)
- Text color (#FFFFFF) / Text size (18) / Text Font weight (bold)
- Use Spacer element to make additional padding
- Layout 2 / Hover effect (3)
- Text color normal (#111111) / Text color hover (#FFFFFF) / Font Size (18) / Font weight (normal)
- BG color normal (#FFFFFF) / BG color hover (#111111)
- Border color normal (#111111) / Border color hover (#111111) / Border Size (3) / Border style (Solid)
- Padding: Vertical (25) / Horizontal (70)
Content Box Setting (Layout 2):
- Show icon (On) / Show BG image (On) - Upload your BG image / BG color (#111111)
- Drag & drop Title element and Text element into the content box
- Title color (#FFFFFF) / Title size (40) / Title Font weight (bold)
- Text color (#FFFFFF) / Text size (18) / Text Font weight (bold)
- Use Spacer element to make additional padding