Loading, please wait...

ARTDESIGN BUTTON

SETTINGS

Attributes

data-plugin-ad-button="ad-button"

This attribute is required in order to applied the plugin on the desired element
<a href="#" data-plugin-ad-button="ad-button">Button</a>

data-ad-button-options="OuterShadow, FullBlue"

This attribute overwrites the settings of the plugin only for the concrete element
<a href="#" data-ad-button-options="OuterShadow, FullBlue">Button</a>

data-ad-button-icon="icon-info"

This attribute adds an icon to the button
<a href="#" data-ad-button-icon="icon-info">Button</a>

data-ad-button-switch="switch"

This attribute enables switching mode (Active / Inactive)
<a href="#" data-ad-button-switch="switch">Button</a>

data-ad-button-current="current"

This attribute makes the button active when it is on activated switching mode (Active / Inactive)
<a href="#" data-ad-button-current="current">Button</a>

disabled="disabled"

This attribute activates disable mode
<a href="#" disabled="disabled">Button</a>

Public Methods

Destroy

<script type="text/javascript">
    var Button = $(".ArtDesign").ArtDesignButton();
    Button.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "But_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "But_"
    },
    Global: { // Global settings of the element
        MaxWidth: "250px", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "250px"
        Width: "auto", // Set the Width; Must be string (px, %, auto); By default: "auto"
        Height: "35px", // Set the Height; Must be string (px, %, auto); By default: "35px"
        Margin: "0 10px 10px 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "0 10px 10px 0"
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        Clear: "", // Set Clear style on the CSS; Must be string (none,left,right,both,initial,inherit); By default: ""
        Cursor: "pointer", // Set Cursor style on CSS; Must be string; By default: "pointer"
        CursorDisabled: "not-allowed", // Set Cursor style on CSS while it is on the disabled mode; Must be string; By default: "not-allowed"
        OpacityDisabled: 0.8, // Set the opacity of the element while it is on the disabled mode; Must be decimal; By default: 0.8
        AnimationSpeed: 0.4, // Set the AnimationSpeed; Must be decimal; By default: 0.4
        ZIndex: 1, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 1
        DisableBackSwitch: false // When the attribute: data-ad-button-switch="switch" is applied, this setting do not allow to switch off the button; Must be boolean; By default: false
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    MainBackground: { // Setting for the MainBackground colors animation
        Animation: true, // If it is true, it sets the following settings for MainBackground colors; normal, hover and click; Must be boolean; By default: true
        Normal: {
            BackgroundColor: "#FCFCFC" // Normal background color without gradient; By default: "#FCFCFC"
        },
        Hover: {
            BackgroundColor: "#6488AA" // Hover color without gradient; By default: "#6488AA"
        },
        Click: {
            BackgroundColor: "#52708C" // Click color; By default: "#52708C"
        }
    },
    Text: { // Settings of the text of the element
        Animation: true, // If it is true, it sets the following settings for Text; Must be boolean; By default: true
        FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
        FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
        FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
        FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
        MarginTop: "20px", // Set the MarginTop of the text; Must be string; By default: "20px"
        MarginLeft: "20px", // Set the MarginLeft of the text; Must be string; By default: "20px"
        MarginRight: "20px", // Set the MarginRight of the text; Must be string; By default: "20px"
        LineHeight: "2.4em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.6em"
        Normal: {
            Color: "#6488AA" // Normal color; By default: "#6488AA"
        },
        Hover: {
            Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
        },
        Click: {
            Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
        }
    },
    Icon: { // Settings for the Icon
        Animation: true, // If it is true, it sets the following settings for Icon animation; Must be boolean; By default: true
        Position: "Left", // Set position of the element; Must be string (left, right); By default: "Left"
        FontSize: "20px", // Set the size of the font; Must be string (px, %); By default: "20px"
        LineHeight: "1.6em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.6em"
        PaddingHorizontal: "5px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "5px"
        Normal: {
            Color: "#6488AA" // Normal color; By default: "#6488AA"
        },
        Hover: {
            Color: "#FCFCFC" // Hover color without gradient; By default: "#FCFCFC"
        },
        Click: {
            Color: "#FCFCFC" // Click color; By default: "#FCFCFC"
        }
    },
    Background: { //Settings for the background animation of the element
        Animation: false, // If it is true, it sets the following settings for Background animation; Must be boolean; By default: false
        Normal: { // background setting for Normal mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        },
        Hover: { // background setting for Hover mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        },
        Click: { // background setting for Click mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        }
    },
    Shadow: { // Settings for the Shadow of the element
        Outer: { // Setting for the outer shadow of the element
            Animation: false, // If it is true it sets the following settings for normal, hover and click; Must be boolean; By default: false
            Normal: { // Settings for Normal shadow mode
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Hover: { // Settings for Hover shadow mode
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Click: { // Settings for Click shadow mode
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            }
        },
        Inner: { // Setting for the inner shadow of the element
            Animation: false, // If it is true it sets the following settings for normal, hover and click; Must be boolean; By default: false
            Normal: { // Settings for Normal shadow mode
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Hover: { // Settings for Hover shadow mode
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Click: { // Settings for Click shadow mode
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            }
        }
    },
    Border: { // Settings for the animation of the Border
        Animation: false, // If it is true it set the following settings for normal, hover and click; Must be boolean; By Default: false
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        Normal: { // Settings for Normal BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
        },
        Hover: { // Settings for Hover BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
        },
        Click: { // Settings for Click BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
        }
    }
</script>