States
To give even more impact to the project, add a hover state, this means when a site visitor interacts with an element it will be changed instantly with another style, it is generally triggered when the user hovers over an element with the cursor (mouse pointer).
States could be applied to the following elements:
- Text
- Rectangle
- Icon
- Button
- Video
- Slider
- Form
For adding a new style, press on the plus icon on the right side close to the States title and press on the Hover title.
Oncle Hover title is pressed under Default state will appear Hover state, press on it to apply Hover options for the selected element.
Text
For the Text element, the Hover state allows changing Fill properties, applying different colors and/or opacity.
Click on the color (black square) icon and choose any desired color, or pressing on the color hex code title will allow entering a predefined color code.
Pressing the icon with four circles allows selecting a color from color styles.
Once hovering on the drop icon, a left-right arrow should appear, allowing dragging to the desired opacity amount, just click and drag, and release after the excellent transparency is reached.
Alternatively pressing on the number will allow typing the exact opacity amount, from 0 to 100.
Rectangle
For the Rectangle element, the Hover state allows changing Fill properties, applying different colors and/or opacity.
Click on the color (orange square) icon and choose any desired color, or pressing on the color hex code title will allow entering a predefined color code.
Pressing the icon with four circles allows selecting a color from color styles.
Once hovering on the drop icon, a left-right arrow should appear, allowing dragging to the desired opacity amount, just click and drag, and release after the excellent transparency is reached.
Alternatively pressing on the number will allow typing the exact opacity amount.
Icon
For the Icon element, the Hover state allows changing Fill properties, applying different colors and/or opacity.
Click on the color (red square) icon and choose any desired color, or pressing on the color hex code title will allow entering a predefined color code.
Pressing the icon with four circles allows selecting a color from color styles.
Once hovering on the drop icon, a left-right arrow should appear, allowing dragging to the desired opacity amount, just click and drag, and release after the excellent transparency is reached.
Alternatively pressing on the number will allow typing the exact opacity amount.
Button
For the Button element, the Hover state allows changing the background color and/or opacity, modifying text properties, or adding a text shadow.
Pressing on the square that indicates background color will open a color selection tool that gives the ability to change the text color to any desired color from 16,777,216 different colors.
Or press on the color code that starts with a # sign and type 6 symbols color code.
Once hovering on the drop icon, a left-right arrow should appear, allowing dragging to the desired opacity amount, just click and drag, and release after the excellent transparency is reached.
Alternatively pressing on the number will allow typing the exact opacity amount.
Choose any font from a bunch of free-to-use fonts, press on the arrow icon and choose any font name you like, or press on the search box and type the name of the familiar font that could be on the list.
Choose among all the available text weights, it could be a different amount of text weights based on the selected font, Roboto has 6 unique text weights, from Thin to HeavyBold.
Pressing on the square that indicates text color will open a color selection tool that gives the ability to change the text color.
Or press on the color code that starts with a # sign and type 6 symbols color code.
Once hovering on the drop icon, a left-right arrow should appear, allowing dragging to the desired opacity amount, just click and drag, and release after the excellent transparency is reached.
Alternatively pressing on the number will allow typing the exact opacity amount.
Once hovering on the icon that shows a letter should appear a left-right arrow allows dragging to the desired letter-spacing amount, click and drag, and release after the amount was reached.
Or type in the desired value of letter spacing.
Choose desired text alignment, and press on the icon that represents text alignment, it could be switched between:
- text-align left
- text-align center
- text-align right
- text-align justified
Align text position relative to button, it could be switched between:
- align top
- align middle
- align bottom
For adding Text Shadow press on the plus icon.
By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.
Text Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.
Play around with all the options, once happy just click anywhere on the canvas or proceed straight to any other property or element.
Slider
Choose between 3 types of states, default, hover and/or active.
For Slider only there is the active state it applies on slider dots, the user could swap through all the images inside the slider but active means current selection, initial it will be the first image from the slider respectively first dot, from left to right.
Apply any desired color for slider arrows and/or dots.
Important: Place the slider element inside the page and press on the top right eye icon to preview applied changes for the hover state.
Form
Play around with Fields and/or Button Style, apply a new color, border or text, or even text shadow.
Important: Place the form inside the page and press on the top right eye icon to preview applied hover styles.
