[lead]Clickable buttons.[/lead]

Attributes

[list type=”unordered”]

  • size: set the button size (values: small, medium, large, extra_large, full_width).
  • color: set the button color (values: white, gray, black, accent).
  • text: set the button text.
  • text_color: set the button text color.
  • font_style: set the button text font style.
  • font_weight: set the button text font weight.
  • align: set the button alignment (values: left, right).
  • icon: set the button icon if any
  • icon_color: set the button icon color
  • margin: set the button margin (i.e.: 12px 0 24px 0)
  • link: set the button url
  • target: set the button url target (values: _self, _blank)
  • [/list]

    Demo

    [row bg_color=”#f2f2f2″ text_align=”center”]
    [padding]
    [button size=”small” color=”gray” text=”Read more” link=”#”][/button]
    [button size=”small” color=”accent” 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=”accent” 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]

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