Buttons
Clickable 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]
Extra large button.
Extra Large button
[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]
[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]
Fullwidth button.
Fullwidth button
[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]