![](https://suathayriugurbas.com/wp-content/themes/medicalwp/images/separator.png)
ID: Optional CSS value.
Class: Custom CSS class.
Link URL: Enter link URL.
Link Target: Choose option when reader clicks on the link.
Color: Select the color variation.
Align: Select the alignment for a button.
BG Color: Select the BG color.
Hover BG Color: Select the Button Background Color on hover state.
Hover Text Color: Select the Button Text Color on hover state.
Text Color: Select the Text color.
Button Size: Select the Button Size.
Fullwidth: Check this if you wish to display button in full width and uncheck if you wish to use specific width below.
Button Width: Use px or % as units for width, do not leave only integers.
Button Text: Type the text you wish to display for button.
![](https://suathayriugurbas.com/wp-content/themes/medicalwp/images/separator.png)
Samples Buttons With Different Size
Small Medium Large[button color="orange" size="small" style="false"]Small[/button]
[button color="orange" size="medium" style="false"]Medium[/button]
[button color="orange" size="large" style="false"]Large[/button]
![](https://suathayriugurbas.com/wp-content/themes/medicalwp/images/separator.png)
Button With Color Variation
Black Brown Gray Cyan Orange Red magenta Yellow Blue Pink Green White// Size - Three type of size as mention above
// color - Different type colors as mention above
[button size="medium" color="black"]
Button Text
[/button]
![](https://suathayriugurbas.com/wp-content/themes/medicalwp/images/separator.png)
Buttons With Special Colors
#000000 #000000// bgColor - To change the button background color
// color - Different type colors as mention above
// text - To change the button text color
[button bgColor="#5FACA7"]#5FACA7[/button]
[button color="white" textColor="#5FACA7"]#5FACA7[/button]
![](https://suathayriugurbas.com/wp-content/themes/medicalwp/images/separator.png)