SaaButton

1. Colors

SaaButton supports two background colors, two border colors, two click colors, two hover colors and one text color. The position of these colors can be adjusted by using color angles. Color angles tell at which position(in 360deg) two colors meet.

BackColor and BackColor2 are the two colors for the background while they are adjusted with BackColorAngle.

BorderColor and BorderColor2 are the colors for the border while they are adjusted with BorderColorAngle.

ClickColor1 and ClickColor2 are colors that appear when the button is clicked. These colors share BackColorAngle with BackColor and BackColor2 which means ClickColor1 takes position of BackColor and ClickColor2 takes that of BackColor2.

HoverColor1 and HoverColor2 are colors that appear when the mouse pointer is over the button but not clicked. Just like ClickColors these colors too share BackColorAngle with BackColors.

2. Text and Icon

SaaButton supports both Icon and Text. You can use Icon, Text or both at the same time. But instead of 'Text' property SaaButton has Value. This means if you are going to set a text to SaaButton you need to use Value. The position of the icon and text can be adjusted with offset X or Y.

Value and Icon properties represent the text and the image that is displayed on the button respectively.

TextOffSetX tells how far the text should move from the left side to the right side while TextOffSetY tells how far the text should move from top to bottom.

IconOffSetX tells how far the image should move from the left side to the right side while IconOffSetY tells how far the image should move from top to bottom.

IconSize tells the size of the image. This means you can resize the image to your need.

3. Border

You can set the border thickness using Border property. '0' means no border.

4. Radius

Radius property tells the roundness of the button edges. With this property you can change the shapes of the border edges. Radius has four properties: TopLeft, TopRight, BottomRight, BottomLeft.