Buttons

There are a couple of presets available for the buttons for easy usage. You can however change almost every aspect of the button! See the examples below.

Presets

 

Without rounded corners

 

Gradient, shadow and no arrow

 

Button [button]

Creates a nicely formatted button

Parameters

  • margin

    Enables you to add margins to the element
    Default: normal

    Possible Values

    • small
      Add a margin of 22px below the line
    • normal
      Add a margin of 44px below the line
    • large
      Add a margin of 66px below the line
    • css value
      If you would like to add a margin to the element use the following notation: 11px 20px 8px 9px. The element will have a 11px top margin, a 20px right margin, an 8px bottom margin and a 9px left margin.
  • color

    Enables you to specify the text color of this element
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
      primary
      red
      cyan
      yellow
      black
      blue
      green
      purple
      orange
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • background

    Enables you to specify the background color of this element
    Default: primary

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
      primary
      red
      cyan
      yellow
      black
      blue
      green
      purple
      orange
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • arrow

    Show an arrow in the button
    Default: yes

    Possible Values

    • yes
      The arrow will be shown
    • no
      The arrow will not be shown
  • radius

    Set the border radius of the element
    Default: 5px

    Possible Values

    • css value
      Any valid CSS value can be used for the border radius, eg: 3px
  • text

    Specify the text shown on this element
    Default: To The Top

    Possible Values

    • text
      Any text can be used here
  • url

    Specify the URL of the link
    Default: #

    Possible Values

    • url
      Any well formed URL can be used. Don't forget to start with "http://"
  • gradient

    Apply a gradient based on the background color
    Default: no

    Possible Values

    • yes
      A gradient will be applied
    • no
      The background will be a solid color
  • shadow

    Apply a drop shadow to the element
    Default: no

    Possible Values

    • yes
      A drop shadow will be applied
    • no
      There will be no drop shadow
  • border_style

    Choose the style for this border
    Default: solid

    Possible Values

    • dotted
      Created a dotted border
    • dashed
      Created a dashed border
    • solid
      Created a solid border
  • border_width

    Specify the width of the border
    Default: 1px

    Possible Values

    • css value
      The value of this property can be any valid CSS value. We recommend using pixels (eg: 2px ), but you may also use any other css specification.
  • border_color

    Enables you to specify the color of the border
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • outline_style

    Choose the style for this outline
    Default: solid

    Possible Values

    • dotted
      Created a dotted border
    • dashed
      Created a dashed border
    • solid
      Created a solid border
  • outline_width

    Specify the width of the outline
    Default: 0px

    Possible Values

    • css value
      The value of this property can be any valid CSS value. We recommend using pixels (eg: 2px ), but you may also use any other css specification.
  • outline_color

    Enables you to specify the color of the outline
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • style

    Add custom styles to this element

    Possible Values

    • css rules
      Add any css rules as if you were adding them inline. To add a border and a margin for example you could write: "margin-bottom:10px; border:1px solid white"