Buttons

Attributes

Attribute Description Values Default
size Define the button size small, medium, large, extra_large, full_width small
color Defines the button color white, gray, black, accent N/A
text Define the button text Text N/A
text_color Define the button text color HEX or RGB value N/A
font_style Define the button text font style normal, italic, oblique, initial, inherit normal
font_weight Define the button text font weight normal, bold, bolder, lighter, %number normal
align Define the button alignment (values: left, right) left, right left
text_color Define the text color HEX value N/A
text_align Define the text alignment left, right, center, justify left
icon Define the button icon Available icons N/A
icon_color Define the button icon color HEX or RGB value N/A
margin Define the button fixed margin pixels, pt, em, % N/A
link Define the button url URL N/A
target Define the button url target _self, _blank _self
Demo

[row bg_color=”#f2f2f2″ text_align=”center”]
[padding]
[button size=”small” color=”gray” text=”Read more” link=”#”][/button]
[button size=”small” color=”black” text=”Order now” link=”#”][/button]
[/padding]
[/row]

[code]
[row bg_color=”#f2f2f2″ text_align=”center”]
[padding]
[button size=”small” color=”gray” text=”Read more” link=”#”][/button]
[button size=”small” color=”black” text=”Order now” link=”#”][/button]
[/padding]
[/row]
[/code]

[spacer top=”12px” bottom=”12px”][/spacer]

[row bg_color=”#f2f2f2″ text_align=”center”]
[padding]
Extra large button.

[button size=”extra_large” color=”gray” text=”Extra Large button” link=”#”][/button]
[/padding]
[/row]

[code]
[row bg_color=”#f2f2f2″ text_align=”center”]
[padding]
Extra large button.

[button size=”extra_large” color=”gray” text=”Extra Large button” link=”#”][/button]
[/padding]
[/row]
[/code]

[spacer top=”12px” bottom=”12px”][/spacer]

[row bg_color=”#1c1c1e” text_color=”#fff” text_align=”center”]
[padding]
Buttons with icon.

[button color=”white” icon=”fa-linux” size=”large” text=”Linux” link=”#”][/button]
[button color=”white” icon=”fa-apple” size=”large” text=”Apple” link=”#”][/button]
[/padding]
[/row]

[code]
[row bg_color=”#1c1c1e” text_color=”#fff” text_align=”center”]
[padding]
Buttons with icon.

[button color=”white” icon=”fa-linux” size=”large” text=”Linux” link=”#”][/button]
[button color=”white” icon=”fa-apple” size=”large” text=”Apple” link=”#”][/button]
[/padding]
[/row]
[/code]

[spacer top=”12px” bottom=”12px”][/spacer]

[row bg_color=”#00a9c5″ text_color=”#fff” text_align=”center”]
[padding]
Fullwidth button.

[button color=”white” icon=”fa-arrows-h” size=”full_width” text=”Fullwidth button” link=”#”][/button]
[/padding]
[/row]

[code]
[row bg_color=”#00a9c5″ text_color=”#fff” text_align=”center”]
[padding]
Fullwidth button.

[button color=”white” icon=”fa-arrows-h” size=”full_width” text=”Fullwidth button” link=”#”][/button]
[/padding]
[/row]
[/code]

(Visited 1 times, 1 visits today)