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.

Checkout Here…

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.

Weebly Default Button Styles
Weebly Default Button Styles

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.
Weebly Button Element Options
Weebly Button Element Options

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.

Related:  Bootstrap 4 Cards Tutorial

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
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
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“.

Related:  How to Customize Quick Access in Windows 10?

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-style.css” file under “/* Buttons*/” section. 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.

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:

New CSS Button in Weebly
New CSS Button in Weebly

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.

Related:  How to Fix Leverage Browser Caching Issue in WordPress?

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). (View full demo here).

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

Recommended Articles:

16 thoughts on “How to Add and Customize Buttons in Weebly Site?”

  1. 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. ?

    Reply
    • 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.

      Reply
        • 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.

          Reply
          • 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.

  2. 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”

    Reply
  3. 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

    Reply
  4. 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

    Reply
    • 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.

      Reply
  5. 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!

    Reply
    • 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.

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

        Reply

Leave a Comment