Button editing

I this video you will learn how to add buttons in Webround and manage their styles and animatios.

Transcription

To add buttons in Webround, we follow the usual procedure. We drag and drop them from the plus icon in the top left corner of a canvas. Our template buttons are animated and have a particular style. We need to change the text first, then the basic style, and finally the hover animation style.

We're starting from the text content and, as usual, we have to right-click on the component to access its context menu. The text styles previously defined can be reused for the buttons, so that Font family and text color are automatically applied, but we can also set a unique text style for our button. By using the paragraph style, we'll apply the Geist Font family.

The first button we're editing should have a dark background and an animated style that switches the color on mouse hovering. To do this, we right-click on the button and left-click the brush icon, which opens the Container Style menu. Here, we can easily swap the background color to a dark one.

With the last change, our text became unreadable because it should be white. By opening the text menu, we can reach the last options, where we'll find the text color and set it to white. To complete the style, we need to update the border radius property with the Container Style menu. Here, we'll find the border radius option, we'll set it to 8.

The button is still missing the Animation effect, which has to change the background color. The hover effects are available in the Animation menu, accessible through the running Stickman icon. Open the menu and you'll find a set of properties that can be changed once you hover the button. We select the color property and pick the blue button we have previously saved. Now, the button changes color when hovered.

If we want to replicate this style across the site, we can save the button style. Let's use the second position. To override the button style with the one we've just saved, we can right-click on a button and use the override style menu. This button has a different style, though.

To reset the animation, we can disable all animations from the menu and then apply a transparent background to the button. After changing the text color to black, we can set the border style. To change the border color, click on the color picker dot and set a lighter color by reducing the alpha value to increase transparency.

The last thing to do is to apply the border animation when hovering the button. To do this, we access the animations and set border thickness and color.