The homepage in Edge was created by making a series of state buttons with hover effects. Here is an example of one of the state buttons.
This article goes over the following
- Create your own State Buttons
- Change the Color
- Change the Height
- Hover Overlay Effect
- Transition States
Create your own state buttons
Step One
Open the Widget Library and grab a state button.
Step Two
Right-click on the state button and select Clear All Styling. Then right-click on the state button again and select Clear All Contents.
Step Three
Go to the fill panel and select a color.
Step Four
Grab the rectangle tool, make a rectangle that is the width that you want your state button to be.
Go to the fill panel and add an image. Set the fitting to scale to fit and position the image in the center.
Place the rectangle into your state button. Make sure that your rectangle is set to responsive width.
Step Five
Use the text tool to create some text. Style it. Place it into your state button.
Select the state button. Go to Hyperlinks and for the tooltip enter rh33.33 to have the state button take up a third of the browser height. Then select the image inside of the state button and enter rh33.33 for the tooltip.
Step Six
Select the state button. Go to the Rollover state. Select the image and change the opacity to 10%.
Change the Color
Select the state button.
Go to the fill panel and select a color.
Change the height
The Responsive Height widget is applied to both the state button and the image inside the state button. Because we want each button to take up a third of the browser height, each button was assigned a responsive height of rh33.33.
To change the height of the buttons, make sure you specify the percentage of the browser that you want the button to fill. For example, to have a button take up half of the browser height, you would assign rh50 to the state button and rh50 to the image inside the state button.
Hover Overlay Effect
To change the opacity of the image:
Step One
Select the state button and go to the hover state.
Step Two
Click on the image inside the state button. Go to effects, and change the opacity to make it more or less visible.
Transition States
You can edit the way the button fades when hovered
Step One
Click on the states panel
Step Two
Click on the Transition drop down
Here you can adjust:
Delay: The amount of time it takes for the transition to begin
Duration: The amount of time the transition lasts
Speed: How the transition acts
For more information on how to use the ‘Responsive Height’ Widget please click here.
