General Settings
Link
The Link option will allow you to set a link for your your Press button. It uses RapidWeavers built in link interface, making it easy to add links to pages on your site, and external pages as well.
Button Style
There are two button styles with the Press stack:
Icon/Text Centered & Icon/Text Separated
The Icon/Text Centered style of button simply places the Icon or Text content that you have and places either or both of them in the center of the button.
The Icon/Text Separated option will separate the Icon from the text and place it on either side of the button. You have the option to choose which side the icon will be placed on. You can read more about this under the icon section.
Button Text
Show Button Text
This checkbox simply allows you to choose whether or not you want your button to contain text. Turning this option off is great for creating icon only buttons.
Text Font
With the Press stack, we’ve included a list of the best fonts on the web. You can choose from one of these included fonts, OR you can also included custom fonts of your own.
If you want to use a custom font, simply select the “Custom Font” option from the font dropdown list.
After doing so you will see two new input fields appear. One for the URL of the icon font that you want to include (Note icon fonts must be included from a url on the web, which is extremely common these days), The next input will be for the Icon Font Name, for example Roboto, or Railway.
If you include the URL, and the name of your font, your font will be applied to the button.
Button Text (Color)
This color picker will simply allow you to set the text color for your button.
Font Size & Line-height
The font-size and line-height options are straight-forward and will do exactly what you expect.
We’ve included the line-height option for buttons with longer text that may need to wrap, this way you can be sure that your text looks good even when being wrapped.
Text-Padding
The text padding is the padding that will be placed directly around the text. By default it is set to 0, as the button element itself also has padding options.
The text padding is simply for those who would like to add special padding specifically around the button text.
Button Icon
Show Button Icon
This checkbox will allow you to choose whether or not your Press button will have an icon in it or not. By default press buttons do not have icons, but if you want to add one, simply check this box, and you will see an icon appear.
Icon Font
After turning on the “Show Button Icon” option, you then need to select the icon font for the icon that you want to use.
We’ve included three of the major icon fonts on the web: Google Material Icons, Font-Awesome Icons, and Ionicons.
Icon Code
Once you select the Icon Font that you desire, you must then enter the specific code for that icon.
Each Icon font has their own format for writing icon codes, which we will explain below:
– Google Material Icons ( https://material.io/icons/ )
Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.
– Fontawesome Icons( http://fontawesome.io/icons/ )
Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.
NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.
– Ionicon Icons( http://ionicons.com/ )
Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.
Button Icon (Color)
This color picker will simply allow you to set the color for the icon in your button.
(Icon) Background
We’ve included the additional option to add a background specifically to the icon of the button. You can choose between a solid color, a gradient, an image, or no background.
By default the icon will have no background, and no padding set on it.
The Icon background option is mostly useful when it comes to using the Icon/Text Separated button style, as it will allow you to add a flush look to the icon, that separates it from the text, similar to the YOUTUBE BUTTON on our preview page.
Icon Spacing
The Icon spacing option is for adding spacing between the icon and the text of your button. In some cases you may want a larger icon with more space between the text of your button, in which case you might find this option useful.
Icon Padding
We’ve also included specific padding options for the icon of the button, as an extra feature. It is unlikely that you will need to adjust this, but if you do want to add specific padding around your icon, you can do so with this option.
Button Initial State
This is the section where you will find the majority of styling options for your button, including the width, margin, padding, background, border, shadow, radius and more.
Fill Mode
The fill mode dropdown list will allow you to select the width (size) of your button. There are four options:
– Fill
The fill option will make your Press button stretch all the way across the page.
– Auto
The auto option will make your Press button only as wide as the content inside of it. It will fit the size of the icon/text contained.
– Pixel Width
The pixel width option will allow you to set a specific width for the button. Note that this width is fixed and not responsive.
– Percentage Width
The pixel width option allows you to specify a percentage for your button to fill. It will fill the percentage that you choose of it’s direct parent container.
Padding, Margin, Radius
The padding option simply allows you to set the inner padding of the button.
The margin option simply allows you to set the space around the edges of the button.
The radius option allows you to control the roundness of your notifications corners.
Button Background
The background option allows you to set a custom background for your button, you can choose between:
– None (no background)
– Solid Color (a single color)
– Gradient (a gradient between two colors, including the direction)
– Image (an image of your choice, the sizing is up to you)
Border
The border option is straight-forward and simply allows you to add a border to your notification, you can control the weight, color, and style of the border.
Shadow
The shadow option allows you to add a box shadow to your notification. You can choose the color and other basic box-shadow properties such as x and y offsets, blur, and spread distance.
Adding Special Hover & Active Styles
With the Press button stack, we’ve provided a really great and innovative way for adding specific styles to your button in different states. You can add custom styles for both the hover state of your button or the active state. This is great when you want to change the background color on hover, or if you want to add a drop-shadow on hover, etc.
If you take a look at the “Button Hover State” and “Button Active State” sections in the settings panel, you will find that there are 5 checkboxes at the top of each section:
– Custom Text
– Custom Icon
– Custom Background
– Custom Border
– Custom Shadow
Simply check the specific style that you want to be applied on the Hover or Active State. This is great for mixing and matching specific styles. You can choose which styles you want to remain the same as the initial state, and which styles you would like to change.
Of course, you will find all of the proper controls for customizing these styles such as the text, icon, background, border, shadow under the checkboxes.
Animations
As an additional feature, we’ve added the ability to animate your button on hover. If you want your button to animate, simply check the “Animate on Hover” option, and then select from a list of cool animations!
Advanced
In the advanced section you will find an input that allows you to access the class attribute of the Press button. This is great for developers who might want to target their button specifically and set up a special javascript function for the button to trigger. Simply type in the classes that you want to add, separated by spaces.