# SaaButton

![](https://3593808699-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeLJp7jLxK-XmIvfxh3%2F-Mf9202f4OgtnqRFhrn3%2F-Mf92DQW3J4MigDv0Y94%2FSaaButton.png?alt=media\&token=dc0bf883-273d-44ef-af13-dd258d74da4e)

## 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`.