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:
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.
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:
/* 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:
/* 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:
/* 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).
Download the CSS / HTML code for this Weebly gradient buttons widget.
18 Comments
Leave your reply.