That's it! Enjoy your customized site!
You need repeat this process for each button you want to add hover to. Please note also that the code will need to be added to the page that the button appears on. If you have multiple buttons on the same page that will have the same hover animation you can combine the CSS by adding a comma between the button selectors, you can see an example below.
Click the custom CSS box. Now paste in your code. And you're done!
Now try hovering over your button, you should now see a hover effect working. As you can see, the color property changes the text color and background-color property changes the background color of the button. Go ahead and change the hex codes in the color properties to match your website. There are a lot of things you can do with the transition property however this is a nice default to make the hover animation look nice and not so harsh. Once you're happy with the way your button looks the last thing you need to do is add the CSS code to your site. Do this by copying the code, then navigate to the back end of your site. Click the page that the button is located on then click on the right hand side “advanced settings”.
Now put the below code inside the brackets on your style sheet:
color: #ffffff;
background-color: #828282;
transition: all .3s ease;
You will need to add to the end of the targeted class “:hover”. This tells it what to do when the element is hovered over.
This will take you to the style sheet.
Then click on the inspector style sheet link
You now need to target the class of this text box to add the hover styling we want. The easiest way to do this is by clicking the new style rule button when the button text element is highlighted. When you click the new style rule button it will automatically write it out in the element styles below.
You also want to make sure that the text box is layered in front of the button shape. Also you want to make sure that the text box and the button shape both are linked wherever you want the link to go. Repeat the above steps to prep the button for hover effects on the mobile view also.
Now your button is ready to have legit hover effects added to it!
Go ahead and view your show it website in your browser. Do this by clicking preview in the top right and then click the site preview link to pull it up fully in your browser. For this next step we need to inspect the button element that you just created. This can be done in different browsers however for this tutorial I'm going to use Google Chrome. Scroll down to your button and then right click on the text of it. You will then see the chrome inspector tools come up on your screen. Look and make sure that your button text is highlighted in blue in the inspector and that the elements tab is open.
If the button moved out of position when you did this, just be sure to have the text box and the button shape selected when you move it back into place. The text of the button is probably not centered vertically at this point. So to fix this, we will adjust the line height of the text box found under the “Text Style” tab. Select the text box and continue increasing the line height until it looks centered vertically for you.
Now click on text of your button. You are going to make the text box the same size as the entire button itself. Once your text box is selected, go to the “Size and Position” tab and enter the same height and width that you previously made note of. It's important to make sure that the text box and button shape line up perfectly. To do this, select both and click the vertical align and the horizontal align buttons under the “Align to Group” section.
The method I’m about to show you is pretty simple because you don't even have to embed HTML code. To begin, start by creating a button like you normally would in Showit, creating a rectangle as the button shape and placing a textbox in the middle of it for the button text. Now click on your button shape, selecting the border of your button and click on the “Size and Position” tab to view the height and width of it. Make a note of these.
example
Showit has pretty limited built-in options for creating buttons with nice looking hovers so most people end up creating buttons on their Showit site that have no hover effects at all. This is partly because of the way buttons are created on Showit ie creating a rectangle or other shape and then placing a textbox inside of it and linking both elements to a page or hyperlink. In this tutorial I'll show you how to create buttons in Showit with great looking hover effects, where the background of the button changes along with the text color when you hover over it, like the example below.
