• This is The Happy Jetlagger. – Travel. Storytelling. Photography.

    • de

Buttons

Make the buttons stand out to get higher conversion rate.

Button Size

Size helps attracting the audience to take action.

Button Style

There are two ready-to-use color: Brand and Basic.
Basic Fill
Brand Border
Basic Fill
Basic Border

Button Hover Style

You can define style and hover style independently.
Brand    Brand
Brand Inverse
Basic    Brand
Basic Inverse

Button Hover Dark Scheme

Basic-color button changes according to its parent color scheme.
Brand    Brand
Brand Inverse
Basic    Brand
Basic Inverse

Button Border Radius

Define the radius in pixel, you can change the border thickness as well.

Button with Icon

With more than 900 icons, you would love how it looks with those icons.
Icon Left
Icon Right
Icon Left
Icon Right

Button Inline

Place the buttons side by side to each others with the inline option. Put buttons inside Box for alignment.
Mauris tempus at nisi vel mattis. Nulla sed augue eget dolor pharetra tristique. Aliquam et metus hendrerit, ornare augue ut, auctor eros. Maecenas faucibus, sapien quis aliquet pellentesque, enim nisl lacinia nibh, at interdum augue dolor sed metus. Praesent mattis malesuada rutrum. Vivamus luctus erat nec eleifend suscipit. Sed sed sapien et mi posuere condimentum sed ac ex. Suspendisse eu mi turpis. Fusce egestas, nisi in porta dictum, elit urna mattis augue, molestie venenatis erat lorem sed massa. Cras consectetur elementum ligula, sed tristique velit condimentum et. Morbi lacus magna, commodo sed lectus sed, ornare convallis nibh.
Mauris tempus at nisi vel mattis. Nulla sed augue eget dolor pharetra tristique. Aliquam et metus hendrerit, ornare augue ut, auctor eros. Maecenas faucibus, sapien quis aliquet pellentesque, enim nisl lacinia nibh, at interdum augue dolor sed metus. Praesent mattis malesuada rutrum. Vivamus luctus erat nec eleifend suscipit. Sed sed sapien et mi posuere condimentum sed ac ex. Suspendisse eu mi turpis. Fusce egestas, nisi in porta dictum, elit urna mattis augue, molestie venenatis erat lorem sed massa. Cras consectetur elementum ligula, sed tristique velit condimentum et. Morbi lacus magna, commodo sed lectus sed, ornare convallis nibh.
Mauris tempus at nisi vel mattis. Nulla sed augue eget dolor pharetra tristique. Aliquam et metus hendrerit, ornare augue ut, auctor eros. Maecenas faucibus, sapien quis aliquet pellentesque, enim nisl lacinia nibh, at interdum augue dolor sed metus. Praesent mattis malesuada rutrum. Vivamus luctus erat nec eleifend suscipit. Sed sed sapien et mi posuere condimentum sed ac ex. Suspendisse eu mi turpis. Fusce egestas, nisi in porta dictum, elit urna mattis augue, molestie venenatis erat lorem sed massa. Cras consectetur elementum ligula, sed tristique velit condimentum et. Morbi lacus magna, commodo sed lectus sed, ornare convallis nibh.
Mauris tempus at nisi vel mattis. Nulla sed augue eget dolor pharetra tristique. Aliquam et metus hendrerit, ornare augue ut, auctor eros. Maecenas faucibus, sapien quis aliquet pellentesque, enim nisl lacinia nibh, at interdum augue dolor sed metus. Praesent mattis malesuada rutrum. Vivamus luctus erat nec eleifend suscipit. Sed sed sapien et mi posuere condimentum sed ac ex. Suspendisse eu mi turpis. Fusce egestas, nisi in porta dictum, elit urna mattis augue, molestie venenatis erat lorem sed massa. Cras consectetur elementum ligula, sed tristique velit condimentum et. Morbi lacus magna, commodo sed lectus sed, ornare convallis nibh.

Button Full Width

If a large button is not big enough, use this Full-width style. Make it stand out.