SaaButton
Last updated
Last updated
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.
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.
You can set the border thickness using Border
property. '0' means no border.
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
.