---

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):

​/* Button #1: Small/Normal */
.wsite-button-normal.wsite-button-small {
  background:black;
  color:white!important;
  font-family:'Oswald';
  border-radius:2px;
  padding:.5em 1em;
}
.wsite-button-normal.wsite-button-small:hover {
  background:white;
  color:black!important;
}
/* Button #2: Large/Normal */
.wsite-button-normal.wsite-button-large {
  background:red;
  color:green!important;
  font-family:'Lato';
  border-radius:4px;
  padding:1em 1.5em;
}
.wsite-button-normal.wsite-button-large:hover {
  background:green;
  color:red!important;
}
/* Button #3: Small/Highlight */
.wsite-button-highlight.wsite-button-small {
  background:blue;
  color:orange!important;
  font-family:'News Cycle';
  border-radius:6px;
  padding:.5em 1em;
}
.wsite-button-highlight.wsite-button-small:hover {
  background:orange;
  color:blue!important;
}
/* Button #4: Large/Highlight */
.wsite-button-highlight.wsite-button-large {
  background:purple;
  color:yellow!important;
  font-family:'Questrial';
  border-radius:8px;
  padding:1em 1.5em;
}
.wsite-button-highlight.wsite-button-large:hover {
  background:yellow;
  color:purple!important;
}

/* Blog Button */
.blog-button {
  background:gray;
  color:#fff!important;
  padding:.5em 1em;
}
.blog-button:hover {
  background:fuchsia;
}

/* Universal Button Styling */
.wsite-button {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background:gray;
  padding:.5em 1em;
  color:white!important;
}
.wsite-button:hover {
  background:fuchsia;
}
/* Don't Touch! */
.wsite-button-inner {
  background:transparent!important;
  padding:0!important;
}

---

Step 6. customize button codes

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.

​
​/* Button #1: Small/Normal */
.wsite-button-normal.wsite-button-small {
  background:black;
  color:white!important;
  font-family:'Oswald';
  border-radius:2px;
  padding:.5em 1em;
}
.wsite-button-normal.wsite-button-small:hover {
  background:white;
  color:black!important;
}

• 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!

---

comments powered by Disqus