When it comes to customizing the buttons on your Weebly site from the Weebly Editor under "Theme>Change Fonts>Buttons", the styling options are very limited. To not be limited, you take the next step and head back into the Weebly HTML/CSS Editor of your theme to simply change the CSS of your Weebly site's buttons. You click on your CSS file, locate your theme's buttons, and WHAT THE HECK IS GOING ON?! You know what I'm talking about -- complete confusion. Trying to know which CSS codes targets which buttons/size is like trying to decipher hieroglyphics.
To make a long story short, I think the main reason the CSS coding for Weebly buttons is so confusing is because the codes need to work for older Weebly themes as well. To further complicate things, there is a master CSS file located on Weebly's server somewhere that houses the master button CSS codes that apply to all Weebly themes. This means a theme's CSS button codes exist only to override Weebly's master CSS button codes.
But there is good news! If you know Weebly Tricks, you know we like to keep things simple, especially with web design. So what we've done is rewritten Weebly's CSS button codes to be explicit and easy-to-understand. We took it a step further and broke the button codes into 4 separate codes, 1 for each of the 4 buttons a Weebly theme has. This means you can have 4 completely unique buttons in your Weebly site!
Step 1. Reset your buttons
Go to "Themes>Change Fonts>Buttons" and click the "reset" link.
This removes any styling you've applied to your buttons from within the Weebly Editor. Your theme's button codes in the CSS file will now take over the styling.
Step 2. Open Weebly's HTML/CSS Editor
Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.
Step 3. save CSS file
Before you make any changes to your CSS file, save it to your computer so you can revert back to it if you make any mistakes.
Just right click your CSS file, choose "Select all", then right click again and choose "Copy". Open Notepad or a basic text program, paste the CSS file you copied into it, and name it "mysite_CSS_7-27-17".
Step 4. Locate Button CSS Codes
On the left, under "STYLES", click on "main.less". Now on the right, click the search icon at the top and type in "buttons" to locate your theme's CSS button codes.
Note: If the search method doesn't work, you may need to manually look for your theme's button codes. They start with ".wsite-button", but be careful because some themes not only have CSS button codes, but CSS button codes specific to the banner image. We want the initial and you can tell they're the initial as the button codes are preceded by a gray "/* Buttons */" text, or something along the lines.
Step 5. Delete button codes
Stay with me here -- you're doing just fine!
Select all of your CSS button codes (not the entire file), delete them, and replace them with the codes provided below (explanation will follow):
Okay, and now all you're going to do is just apply your CSS styling to each of the 4 buttons, your blog button, and universal buttons. If you don't need a quick breakdown of the code from the last step, you're done -- enjoy styling your new buttons!
For the rest of you, here is a simple and quick explanation of the CSS codes from the previous step from top to bottom:
Each Weebly theme comes with 4 buttons. The CSS codes above are labeled "#1, #2, #3, and #4" to reflect this.
Each button's CSS code above has two subsequent codes: the active styling and the hover styling.
Once you're done the 4 buttons, you can move on to the blog's button styling.
At the end of the CSS codes from the previous step are "Universal Button Styling" codes. Styling codes here will apply to every other button on your site, such as the "Contact" element's "submit" button.
Leave ".wsite-button-inner" alone!
You're done! Publish your site to see your theme's new buttons!
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.