There’s actually a Weebly element called “Buttons”. It’s definitely one of the most important elements. For instance, anyone can add a button requesting visitors to download a Word document. It’s sometimes common when you can like the whole theme but the button on that theme may have an ugly 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. Well, this article explains how to add buttons in Weebly.
How to Add Buttons in Weebly
Weebly has a ready-to-use 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.
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.
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.
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“.
If you liked this tutorial, then you may consider subscribing to our WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.
Now, using Bootstrap needs a some CSS knowledge and it is very easy to get particular element’s style and apply it on your website. Let us take an example of notification boxes. Bootstrap does offer lot of styling to create such boxes but you may just need to copy the following classes.
