button text
Click inside the text input field and add the text your button should be showing.
Button documentation
Click on an item in the left sidebar to view the related instructions
font family
Your button can have any font family and font weight you would like, any font from the Google font library can be chosen.
If you are using a custom font on your theme or are already loading a font family from the Google library you can include the correct name and use the 'Custom Font' option, this way you can reduce requests made to load fonts.
If you are using a custom font on your theme or are already loading a font family from the Google library you can include the correct name and use the 'Custom Font' option, this way you can reduce requests made to load fonts.
custom font
Please make sure to use the correct name in the 'Custom font name' input field to avoid any mistakes it is suggested to copy the entire font name including quotes and fallback font in case needed.
You can select the font weight going from hairline to black, do please note that note each font family will have all of these weights available, so before selecting the weight make sure your site is loading the required font weight.
By default the font style will be set to 'Normal', you can also if desired set this to 'Italic'.
* Do note that our dashboard is most likely not going to be loading the custom font you have selected,
so the representation of the text in the button will fallback to whatever you have set.
You can select the font weight going from hairline to black, do please note that note each font family will have all of these weights available, so before selecting the weight make sure your site is loading the required font weight.
By default the font style will be set to 'Normal', you can also if desired set this to 'Italic'.
* Do note that our dashboard is most likely not going to be loading the custom font you have selected,
so the representation of the text in the button will fallback to whatever you have set.
font size
Font size is being set in pixels.
You can specify the font size for larger devices such as desktops and laptops, set another value for tablets and phablets, and yet another value for smaller devices such as mobile phones.
* Setting the values for medium and small devices is optional, whenever a value for desktop view is set it will automatically inherit it for other devices, in case different values aren't required.
You can specify the font size for larger devices such as desktops and laptops, set another value for tablets and phablets, and yet another value for smaller devices such as mobile phones.
* Setting the values for medium and small devices is optional, whenever a value for desktop view is set it will automatically inherit it for other devices, in case different values aren't required.
text color
You can set the color of your text by using the color selection tool, or simply input a valid color value in hex, rgb or rgba.
The tool will also allow you to specify any color transparency if needed.
The tool will also allow you to specify any color transparency if needed.
letter spacing
Letter spacing will allow you to create spacing between each letter, the value of this is in pixels.
This setting can also have independent values for medium and small devices.
This setting can also have independent values for medium and small devices.
line height
Line height indicates the spacing between two words on a different line within the button,
it will create vertical spacing whenever text of a button breaks on multiple lines when screen size is getting too small to display it on one line.
it will create vertical spacing whenever text of a button breaks on multiple lines when screen size is getting too small to display it on one line.
button link
It wouldn't be a call to action button if it weren't possible to include a link, make sure to grab the full url string from the address bar of browser, this is also required for internal pages of your website.
Using the gear icon at the right will allow you to open an additional setting where you can specify if the link needs to be opened within the same window or open a new window, leaving the previous one opened.
Using the gear icon at the right will allow you to open an additional setting where you can specify if the link needs to be opened within the same window or open a new window, leaving the previous one opened.
use icon
The 'Use icon' setting will allow you to include any of the large Font Awesome library,
you can use the Search icon field to speed up the search process, search is related to the exact name of the icon.
You can select wether to display the icon before or after the button text and set a value in pixels to add spacing between icon and button text.
you can use the Search icon field to speed up the search process, search is related to the exact name of the icon.
You can select wether to display the icon before or after the button text and set a value in pixels to add spacing between icon and button text.
button width
|
|
|
Button width has 3 options:
* Different widths can be set for different screen sizes (large, medium, small).
- Auto: the button width will depend on its content and padding set.
- Full width: the button will be displayed at full width of its parent container.
- Set width: you can specify a width the button must have, this way all buttons in a row can have the same width. The value needs to be set in pixels.
* Different widths can be set for different screen sizes (large, medium, small).
vertical padding
Vertical Padding will increase the 'height' of the button, providing spacing between the upper and lower edge of the button and its inner content.
* Different paddings can be set for different screen sizes (large, medium, small).
* Different paddings can be set for different screen sizes (large, medium, small).
horizontal padding
Horizontal Padding will increase/decrease the 'width' of the button, providing spacing between the left and right edge of the button and its inner content.
* Different paddings can be set for different screen sizes (large, medium, small).
* Different paddings can be set for different screen sizes (large, medium, small).
top margin
Top margin will increase/decrease the spacing above the button,
value is set in pixels.
* Different margins can be set for different screen sizes (large, medium, small).
value is set in pixels.
* Different margins can be set for different screen sizes (large, medium, small).
Bottom margin
Bottom margin will increase/decrease the spacing under the button,
value is set in pixels.
* Different margins can be set for different screen sizes (large, medium, small).
value is set in pixels.
* Different margins can be set for different screen sizes (large, medium, small).
button align
The button can be aligned to the left, center or right.
* Different alignments can be set for different screen sizes (large, medium, small).
* Different alignments can be set for different screen sizes (large, medium, small).
background color
Modify the background color of your button, you can also specify the opacity of the button here.
border width
The border width can be set using pixels value.
* To remove the border entirely, set the value to '0'.
* To remove the border entirely, set the value to '0'.
border style
Select your border style:
- Solid
- Dashed
- Dotted
- Double
border color
You can specify the border color using valid color values such as hex and rgb,
the opacity slider will allow you to specify transparency of the border.
the opacity slider will allow you to specify transparency of the border.
border radius
|
|
Border radius will allow you to round the edges of the border, the higher the value the rounder your edges will be.
You can also individually set the border radius for each corner.
* To remove any roundness and have squared angles, set the value to '0'.
You can also individually set the border radius for each corner.
* To remove any roundness and have squared angles, set the value to '0'.
use box shadow
|
|
|
Create shadow around your button by selecting the 'Use box shadow' option,
this option will allow you to set the color of the shadow, the horizontal and vertical value it should have,
as well as it blur and spread radius.
You can also select wether to show this shadow when the button is being hovered, on normal state, or both states.
this option will allow you to set the color of the shadow, the horizontal and vertical value it should have,
as well as it blur and spread radius.
You can also select wether to show this shadow when the button is being hovered, on normal state, or both states.
text color hover
Change the text color value for hover state of the button, whenever someone mouseover the button.
hover effect
Select one of the 40 amazing hover effects included for your button, giving the button a professional touch.
background color hover
Change the background color value for hover state of the button, whenever someone mouseover the button.
border color hover
Change the border color value for hover state of the button, whenever someone mouseover the button.