{"id":33937,"date":"2019-03-04T09:08:46","date_gmt":"2019-03-04T09:08:46","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33937"},"modified":"2021-08-12T09:45:30","modified_gmt":"2021-08-12T09:45:30","slug":"button","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/button\/","title":{"rendered":"Button"},"content":{"rendered":"
\n\t
\n\t\t

Button<\/span><\/a><\/p>\n\t<\/div>\n\t

\n\t\t
 Button<\/span><\/a><\/pre>\n\t<\/div>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a><\/li>
  3. Examples<\/a>
    1. Button styles<\/a><\/li>
    2. Opening link in a new tab<\/a><\/li>
    3. The download option<\/a><\/li>
    4. Aligning buttons horizontally<\/a><\/li>
    5. Icons<\/a><\/li><\/ol><\/li><\/ol><\/li><\/ol>\n\n\n
      Description<\/h2>\n\n\n\n
      This shortcode allows you to create highly customizable buttons. You can change button style, colors, size, add an icon or description. One of the most powerful shortcodes of the plugin.<\/p>\n\n\n\n
      Options<\/h2>\n\n\n\n
      url<\/a><\/td>Button link

      Default value:<\/strong> Site URL<\/td><\/tr>
      target<\/a><\/td>Button link target

      Default value:<\/strong> self<\/code><\/td><\/tr>
      style<\/a><\/td>Button background style

      Possible values:<\/strong>
      default<\/code>
      flat<\/code>
      ghost<\/code>
      soft<\/code>
      glass<\/code>
      bubbles<\/code>
      noise<\/code>
      stroked<\/code>
      3d<\/code>

      Default value:<\/strong> default<\/code><\/td><\/tr>
      background<\/a><\/td>Button background color

      Possible values:<\/strong> #HEX color
      Default value:<\/strong> #2D89EF<\/code><\/td><\/tr>
      color<\/a><\/td>Button text color

      Possible values:<\/strong> #HEX color
      Default value:<\/strong> #FFFFFF<\/code><\/td><\/tr>
      size<\/a><\/td>Button size

      Possible values:<\/strong> Number from 1 to 20
      Default value:<\/strong> 3<\/code><\/td><\/tr>
      wide<\/a><\/td>Set this option to yes<\/code> to make the button fullwidth

      Possible values:<\/strong> yes<\/code> or no<\/code>
      Default value:<\/strong> no<\/code><\/td><\/tr>
      center<\/a><\/td>Is button centered on the page

      Possible values:<\/strong> yes<\/code> or no<\/code>
      Default value:<\/strong> no<\/code><\/td><\/tr>
      radius<\/a><\/td>Button border radius. Automatic calculation of the radius is based on the button size<\/code>

      Possible values:<\/strong>
      auto<\/code>
      round<\/code>
      0<\/code> (Square)
      5<\/code> (5px)
      10<\/code> (10px)
      20<\/code> (20px)

      Default value:<\/strong> auto<\/code><\/td><\/tr>
      icon<\/a><\/td>You can upload a custom icon for this button or use a built-in one

      Possible values:<\/strong> Fork Awesome icon name with icon:<\/code> prefix or image URL.
      Example values:<\/strong> icon: star<\/code>, http:\/\/example.com\/icon.png<\/code>

      The list of available Fork Awesome icons<\/a><\/td><\/tr>
      icon_color<\/a><\/td>Color of the vector icon used in the icon<\/code> option. This color won’t be applied to uploaded images.

      Possible values:<\/strong> #HEX color
      Default value:<\/strong> #FFFFFF<\/code><\/td><\/tr>
      text_shadow<\/a><\/td>Button text shadow

      Possible values:<\/strong> CSS text-shadow shorthand property
      Default value:<\/strong> none<\/code><\/td><\/tr>
      desc<\/a><\/td>A short description below the button text. This option is not compatible with icon<\/span>.<\/td><\/tr>
      download<\/a><\/td>A non-empty download attribute tells the browser that the button URL should be downloaded when a user clicks on the button. The value of the attribute will be the name of the downloaded file. The download attribute is not supported in IE or Edge (prior version 18) and in Safari (prior version 10.1). Browser compatibility<\/a>.<\/td><\/tr>
      onclick<\/a><\/td>A custom JavaScript code for the onclick<\/code> HTML attribute. This feature may be disabled on your site. Learn why<\/a>.<\/td><\/tr>
      rel<\/a><\/td>A custom value for the rel<\/code> HTML attribute.

      Example values:<\/strong> nofollow<\/code>, lightbox<\/code><\/td><\/tr>
      title<\/a><\/td>A custom value for the title<\/code> HTML attribute.<\/td><\/tr>
      id<\/a><\/td>A custom value for the id<\/code> HTML attribute.<\/td><\/tr>
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Examples<\/h2>\n\n\n\n
      Button styles<\/h3>\n\n\n
      \n\t
      \n\t\t
        Style: Default <\/span><\/a><\/p>\n
        Style: Flat <\/span><\/a><\/p>\n
        Style: Ghost <\/span><\/a><\/p>\n
        Style: Soft <\/span><\/a><\/p>\n
        Style: Glass <\/span><\/a><\/p>\n
        Style: Bubbles <\/span><\/a><\/p>\n
        Style: Noise <\/span><\/a><\/p>\n
        Style: Stroked <\/span><\/a><\/p>\n
        Style: 3d <\/span><\/a><\/p>\n\t<\/div>\n\t
      \n\t\t
        Style: Default <\/span><\/a>\n\n  Style: Flat <\/span><\/a>\n\n  Style: Ghost <\/span><\/a>\n\n  Style: Soft <\/span><\/a>\n\n  Style: Glass <\/span><\/a>\n\n  Style: Bubbles <\/span><\/a>\n\n  Style: Noise <\/span><\/a>\n\n  Style: Stroked <\/span><\/a>\n\n  Style: 3d <\/span><\/a><\/pre>\n\t<\/div>\n<\/div>\n\n\n\n