How to Add and Customize Buttons in Weebly Site?

Buttons on a Weebly site is one of the important elements used for the purpose of call to action. For example, you can add a button requesting users to download a PDF document. Since Weebly has very less number of themes, it is a common issue that you may like the whole theme but the button on that theme may have intruding style. In such a scenario it is easy to replace the default Weebly button element’s style with your own custom CSS or with other theme’s button style. This article explains the possibilities of customizing default Weebly button element.

Adding Default Button Element

Weebly by default offers a drag and drop button element which can be customized into four different types. Button element is grouped under “structure” category of elements. By default users can add two styles of small buttons and two styles of large buttons.

On all non-responsive themes Weebly uses images to create a button and on all responsive themes the style of the buttons is controlled under “main.less” file. Once drag and dropped, click on the button on your content area to see the following customizing options:

Button Text – text to be displayed on the button.
Button Style – choose one of the four styles available.
Position – center, right or left alignment of button.
Link – add links to button text.
Spacing – adjust top and bottom margins.

In addition to the drag and drop button element, Weebly also offer a call to action button on landing page templates.

Replace or modify the styles of buttons under “main.less” to customize the buttons on your Weebly site using responsive themes.

Responsive Vs Non-Responsive

Before trying to change the style of your buttons, check what type of theme you are currently using. There are three types of buttons used on Weebly themes:

CSS buttons on responsive themes – example theme Slick, Cento.
CSS buttons on non-responsive themes – example theme Cleancut.
Image buttons on non-responsive themes – example theme City.

Non-responsive themes with image buttons – here the button element uses image and the CSS just calls this image as a background, example theme is City.

Non-responsive themes with CSS buttons – themes like Cleancut uses complete CSS buttons without images though it is a non-responsive theme.

Responsive themes – all latest themes like Slick, Cento, Paper, etc. are completely responsive and the button element is generated from CSS code.

We will discuss how to change the button’s style on both responsive and non-responsive themes.

Case 1 – Adding Custom Button Images on Non-responsive Themes

The important feature of Weebly button element is its capability to adjust to the length of the text. The button will get auto adjusted according to the length of the text entered. This is achieved by splitting a button into two images. Before going further, follow the below steps to understand where are the button images stored in a Weebly site.

Login to your Weebly account and choose the site for editing.
Navigate to “Theme” tab and click on the “Edit HTML / CSS” button.
Under “Assets” section you will see different button images as shown below:

Button Images on Weebly Non-Responsive Themes

We noticed all non-responsive themes using images for buttons have 9 sets of images (total 18) for smaller and larger buttons but uses 2 specific images in CSS as a button’s background. Check “main_style.css” and find out what are the images used for buttons. The below example on City theme shows that “button-highlight.png” and “button-highlight-large.png” are used for smaller and larger buttons respectively.

Images Used for Buttons on Non-Responsive Themes

If you don’t like these buttons simply change the image to one of the available image from 9 sets. You an change “button-highlight.png” to “button-purple.png”. In case if you don’t like any of the existing button images then create your own custom images with similar sizes and split style and upload it under “Assets” section. Ensure to use the name of the image in “main_style.css” for the “background” property.

Case 2 – Customizing CSS Buttons on Non-Responsive Themes

If you do not find any button images under “Assets” section of your non-responsive theme then check the “main_style.css” to see the “Buttons” section. Below is the CSS code from Cleancut theme which can be customized background, colors, hover effect, etc. as you need.

/* Buttons
--------------------------------------------------------------------------------*/

/* Small structure & regular style */

.wsite-button {
background: red;
background: -moz-linear-gradient(top,#444 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333));
background: -webkit-linear-gradient(top,#444 0,#333 100%);
background: -o-linear-gradient(top,#444 0,#333 100%);
background: -ms-linear-gradient(top,#444 0,#333 100%);
background: linear-gradient(top,#444 0,#333 100%);
border: 1px solid #000;
box-shadow:inset 0 0 15px rgba(0,0,0,0.25);
-moz-border-radius: 3px;
border-radius: 3px;
color: white !important;
font-size: 13px;
font-weight: 700;
padding: 3px 25px;
text-align: center;
text-decoration: none !important;
text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
}

.wsite-button:hover {
background-position:0 0;
box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.wsite-button:active {
background-position:0 0;
}

.wsite-button-inner {
color: #fff !important;
padding:0;
background: none;
}

.wsite-button:hover .wsite-button-inner {
background:none;
}

.wsite-button:active {
padding:4px 25px 2px;
}

/* Large structure & regular style */

.wsite-button-large .wsite-button-inner {
font-size:14px;
padding:0;
}
.wsite-button-large .wsite-button-inner {
background: none;
}

/* Highlighted styles */

.wsite-button-highlight, .wsite-button-large.wsite-button-highlight {
background: #0370EA;
background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA));
background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%);
background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%);
background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%);
background: linear-gradient(top,#0370EA 0,#0370EA 100%);
border: 1px solid #0052ad;
box-shadow:inset 0 0 18px rgba(0,0,0,0.02);
}

.wsite-button-highlight:hover , .wsite-button-large.wsite-button-highlight:hover {
box-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.wsite-button-highlight .wsite-button-inner {
background-image: none;
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: none;
}

Now go back to the editor and drag the button element to the content area. You can see the button will be with the new style as you defined in “main.less“.

Case 3 – Customizing Weebly Buttons on Responsive Themes

All latest Weebly themes are responsive and use only CSS codes for generating buttons. As explained above, relevant CSS button styles are defined in “main.less” file under “/* Buttons*/” section. If your theme is using @import function in CSS, checkout the corresponding button file for the CSS. Here you need to replace these codes with your own custom CSS button code to change the default button style.

Below are the CSS style definitions for Weebly button:

.wsite-button – Small button
.wsite-button:hover – Hovering effect for small button
.wsite-button:active – Effect when clicking on the small button
.wsite-button-inner – Define the inner elements style like font size and color

Similarly larger button’s will use .wiste-button-large CSS class.

Note: If you have a blog page added on your site, some themes may add an additional CSS class .blog-button for the buttons on blog posts.

You can modify these CSS codes on your own or use any online CSS button generator tool to get the required CSS. For example, the small button styles can be changed with gradient by replacing the default small button codes with the below CSS code:

.wsite-button {
border-top: 1px solid #96d1f8;
background: #6594d6;
background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6));
background: -webkit-linear-gradient(top, #7a3e9c, #6594d6);
background: -moz-linear-gradient(top, #7a3e9c, #6594d6);
background: -ms-linear-gradient(top, #7a3e9c, #6594d6);
background: -o-linear-gradient(top, #7a3e9c, #6594d6);
padding: 14.5px 29px;
-webkit-border-radius: 39px;
-moz-border-radius: 39px;
border-radius: 39px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 24px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.wsite-button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.wsite-button:active {
border-top-color: #1b435e;
background: #1b435e;
}

Change of button element with old and new CSS codes are shown in a sample theme as below:

Note: You can change the large button styles in the same manner. Ensure to change the CSS codes for both small and large button styles to avoid buttons breaking on the published site.

In order to make the task simple for Weebly users, we have three style of buttons using Weebly CSS classes. You can replace the CSS under “/*Buttons*/” section of your “main.less” with one of the below code to change the style of the buttons.

Style1:

Small Button 1

Small Button 2

Large Button 1

Large Button 2

/* Buttons */
.wsite-button,
.wsite-editor .wsite-button {
height: auto;
padding: 0;
background: none;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner {
height: auto;
padding: 8px 12px;
background: #333333;
color: #ffffff;
border: 2px solid #333333;
border-radius: 1px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: normal;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: normal;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.wsite-button-large,
.wsite-editor .wsite-button-large {
background: none;
}
.wsite-button-large .wsite-button-inner,
.wsite-editor .wsite-button-large .wsite-button-inner {
padding: 12px 16px;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
}
.wsite-button:hover .wsite-button-inner {
background: #ffffff;
color: #333333;
border: 2px solid #333333;
}
.wsite-button-highlight,
.wsite-button-large.wsite-button-highlight,
.wsite-editor .wsite-button-highlight,
.wsite-editor .wsite-button-large.wsite-button-highlight {
background: none;
}
.wsite-button-highlight .wsite-button-inner,
.wsite-button-large.wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner {
background: #b9b9b9;
color: #ffffff;
border: 2px solid #b9b9b9;
}
.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner {
background: #a1a1a1;
border: 2px solid #a1a1a1;
}

Style2:

Small Button 1

Small Button 2

Large Button 1

Large Button 2

/* Buttons */
.wsite-button,
.wsite-editor .wsite-button {
height: auto;
padding: 0;
background: none;
}
.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner {
height: auto;
padding: 10px 16px;
background: #35A89A;
color: white;
border-radius: 0;
text-transform: uppercase;
letter-spacing: .07em;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: normal;
-webkit-transition: all 350ms ease-in;
-moz-transition: all 350ms ease-in;
-ms-transition: all 350ms ease-in;
-o-transition: all 350ms ease-in;
transition: all 350ms ease-in;
}
.wsite-button-large {
background: none;
}
.wsite-button-large .wsite-button-inner {
padding: 12px 20px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: normal;
}
.wsite-button:hover .wsite-button-inner {
background: #177267;
}
.wsite-button-highlight,
.wsite-button-large.wsite-button-highlight,
.wsite-editor .wsite-button-highlight,
.wsite-editor .wsite-button-large.wsite-button-highlight {
background: none;
}
.wsite-button-highlight .wsite-button-inner,
.wsite-button-large.wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner {
background: white;
color: #35A89A;
border: 2px solid #35A89A;
}
.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner {
background: #35A89A;
color: white;
}

Style3:

Small Button 1

Small Button 2

Large Button 1

Large Button 2

/* Buttons */
.wsite-button,
.wsite-editor .wsite-button {
display: inline-block;
height: auto;
padding: 0;
background: none;
}
.wsite-button:focus,
.wsite-editor .wsite-button:focus {
outline: none;
}
.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner {
display: inline-block;
height: auto;
padding: 8px 16px;
background: #a1a1a1;
color: white !important;
border: 2px solid #a1a1a1;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: normal;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: normal;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.wsite-button-large,
.wsite-editor .wsite-button-large {
display: inline-block;
height: auto;
padding: 0;
background: none;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.wsite-button-large .wsite-button-inner,
.wsite-editor .wsite-button-large .wsite-button-inner {
display: inline-block;
height: auto;
padding: 12px 24px;
background: #a1a1a1;
color: white !important;
border: 2px solid #a1a1a1;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: normal;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: normal;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.wsite-button:hover .wsite-button-inner,
.wsite-button-large:hover .wsite-button-inner {
background: transparent;
color: #a1a1a1 !important;
}
.wsite-button-highlight,
.wsite-button-large.wsite-button-highlight,
.wsite-editor .wsite-button-highlight,
.wsite-editor .wsite-button-large.wsite-button-highlight {
background: none;
}
.wsite-button-highlight .wsite-button-inner,
.wsite-button-large.wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-highlight .wsite-button-inner,
.wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner {
background: transparent;
color: #808080 !important;
border: 2px solid #808080;
}
.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner {
background: #808080;
color: white !important;
}

Adding Custom CSS Buttons Using Embed Code Element

Customizing existing element is a difficult task since Weebly frequently changes the code as well as the scope of the button will be limited to existing style without much attraction. The easiest and simplest way is to add your own custom CSS buttons instead of modifying the existing codes. This provides endless possibilities of adding different type of 2D and 3D CSS buttons to your Weebly site. But the problem is that you need to add every time using “Embed Code” element with predefined style instead of using “Button” element.

For example, you can add gradient buttons with different styles as shown below by adding the downloaded HTML inside “Embed Code” element and the CSS under main stylesheet (“main_style.css” for non-responsive themes and “main.less” for responsive themes).

RGB Named Colors
Hue Saturation Lightness
Top Flat Bottom Flat

Download the CSS / HTML code for this Weebly gradient buttons widget.

Weebly Call to Action Widget

Customize Weebly Landing Page Buttons

3D Press Buttons Widget for Weebly

Sharon Collins

· Reply

April 14, 2021 at 5:11 AM

Thank you Editorial Staff! I went to Styles, then _ui-kit.less and replaced button codes. Then found buttons in Assets, old.less. and did the same. Don’t know if it was necessary, but covering all bases. My buttons were grey, white, and black…so ugly. There is nothing to replace in the main.less file. They may have changed their platform again since this article was posted.
Now on to the ugly gray footer link colors, but not much luck their so far.

Thank you so much again!

Tanya

January 17, 2021 at 7:33 PM

Hi there,
Is there a way to add a call to action button in the top right of my Weebly website and in a colour that really stands out?
Thank you
Tanya

Zen

January 10, 2020 at 6:45 AM

A million thanks WebNots! I have a non-responsive theme with buttons that looked too plain and a bit dated (and the small buttons also had a double image I didn’t like. I followed your instructions for button style 3, copy/pasted the old code to a text file, then copy/pasted your code and it worked flawlessly! Now my “old” non-responsive themed site has a more updated modern look. ?

LadyJuse

June 22, 2017 at 7:12 AM

How would I centre the text of a button?

Reed

January 27, 2017 at 2:00 AM

main_style.css is not under Assets in my theme html. Might it be found somewhere else? Thanks!

WebNots Admin
· Reply

January 27, 2017 at 9:28 PM

If you are using one of the Weebly’s responsive themes then it will be “main.less” instead of “main_style.css”.

Hope it helps.
- Reed
  · Reply
  
  January 27, 2017 at 10:24 PM
  
  Hmm. What I want to do is change the button style on one site to look like my other site’s buttons. Change the blue/style on this site, http://www.bernsteinviolins.com to the gold/style of this one, http://www.carbonfiberbows.com. I’ve tried copy and pasting the button section from the gold button site to the blue button site, but it comes up grey/white. I understand if this is more than can be answered here! But thanks for any help.
  - WebNots Admin
    · Reply
    
    January 28, 2017 at 12:24 AM
    
    As you are trying to copy CSS buttons with hover effect, copy the complete code from one site and replace the complete button code on the other theme to work properly.
    
    Generally the styles will be available with the comments. You can look for /* Buttons */ section in the “main.less” file and replace it accordingly.
    - Reed
      
      January 28, 2017 at 12:31 AM
      
      Indeed I tried that. the buttons come up with a grey/white theme. Sorry, I really just poke around with html not truly understanding it while hoping it just works! I had hoped to just change the button color, but can’t seem to do that either. Anyway, I don’t want to take up your time. You have been very gracious, and I thank you.

Paul

August 29, 2016 at 11:54 PM

is it possible to change the content of the button while hovering over it?

like for example when you hover over the buttons that it will say “more info” instead of “the custom text”

lewis

March 22, 2016 at 4:41 AM

hope someone can help

my (weebly landing page) site is responsive and i’m trying to change the colour of the arrow button – any help would be great!!

thanks

Arthur

March 13, 2016 at 11:52 AM

I want to change the buttons on my site, and I confess I am totally confused as to figuring out whether I have a responsive or non responsive site. When I search /*button it does nothing, if that helps, My site is arthurvaso.weebly.com

WebNots Staff
· Reply

March 13, 2016 at 10:39 PM

Your site is responsive hence you should be using one of Weebly’s responsive themes. You can resize the browser and see the elements on the site is getting re-aligned automatically to fit the width of the browser – then you are using responsive theme.

As far as we checked, all themes should have button styles under “main_style.css”, please check.

dubi

February 15, 2016 at 6:15 AM

Old theme had blog sidebar new responsive theme dont have sidebar any tutorial how to get back that sidebar

Ruthie Rayne

April 9, 2015 at 3:00 PM

Hi. I’ve been trying forever to change the text color on buttons of either responsive or non-responsive themes. No matter what I do, the text stays white. I’ve had marginal success using something like “rgba(255,255,255,0.4)” but that’s the only way I can get rid of the white. Every now and then, for one reason or another, it works on one size and state of button, maybe two, but it becomes quite breakable for no reason, where I will go to one page of the site and it will work, but the next page will have it all weirded up. Any tips? I’m quite familiar with the .css, I just haven’t found a way to get a text color I want.
Thanks!

Editorial Staff
· Reply

Author

April 13, 2015 at 11:02 PM

In main_style.css look for the class .wsite-button-inner and change the color attribute to to one you need. This should change the color of the text entered inside the buttons.
- Ruthie Rayne
  · Reply
  
  April 14, 2015 at 5:37 AM
  
  Thanks. I’d been doing that all along, then. after I posted this, I started playing around and moved the color attribute out of the .wsite-button-inner class and put it in the .wsite-button class. Believe it or not, it worked. It doesn’t show live in the .css viewer, but that’s common. It appears to be stable, as well. I also rearranged what attributes went into what class, and found that things are much more organized and stable than some of the provided apps. Not only that, but it’s easy to turn a non-responsive theme into a responsive theme if you have the code for the buttons written out :)
  - Editorial Staff
    · Reply
    
    Author
    
    April 14, 2015 at 1:49 PM
    
    Good to know you got what you like!

How to Add and Customize Buttons in Weebly Site?

Adding Default Button Element

Responsive Vs Non-Responsive

Case 1 – Adding Custom Button Images on Non-responsive Themes

Case 2 – Customizing CSS Buttons on Non-Responsive Themes

Case 3 – Customizing Weebly Buttons on Responsive Themes

Adding Custom CSS Buttons Using Embed Code Element

About Editorial Staff

18 Comments

Leave your reply.

Leave a Reply

Your email is safe with us.

DOWNLOAD EBOOKS

TRENDING TECH ARTICLES

POPULAR WEB TUTORIALS

FREE SEO TOOLS

How to Add and Customize Buttons in Weebly Site?

Adding Default Button Element

Responsive Vs Non-Responsive

Case 1 – Adding Custom Button Images on Non-responsive Themes

Case 2 – Customizing CSS Buttons on Non-Responsive Themes

Case 3 – Customizing Weebly Buttons on Responsive Themes

Adding Custom CSS Buttons Using Embed Code Element

About Editorial Staff

You also might be interested in

4 Font Awesome Icons Widget for Weebly Site

12 Best WordPress Business Themes

How to Add Custom Styles to Widgets in WordPress Site?

18 Comments

Leave your reply.

Leave a Reply

Your email is safe with us.

DOWNLOAD EBOOKS

TRENDING TECH ARTICLES

POPULAR WEB TUTORIALS

FREE SEO TOOLS