In our previous article we saw how to add and customize default Weebly button element. Though it is possible to modify the buttons, editing existing button style is a complicated task and often will not work as you expected. The simple solution is to embed your own custom CSS/HTML using Weebly embed code element. You will not get the customization options when embedding, however you can easily create an attractive buttons with CSS effects. Here we explain how to add 3D CSS press buttons in Weebly site.
3D CSS Press Buttons
Below is how the 3D press buttons will look like.
The buttons have the following features:
- No images are required which improves the site loading speed and your efforts spent on creating images.
- Colors and styles are easily customizable to suit any type of theme and layouts.
- You can control number of buttons in HTML using embed code element. This means you can place different number of buttons on different pages keeping the source CSS same.
- Each button can be linked to a single or all pages on your site.
How to Add 3D CSS Press Buttons in Weebly?
We will explain here how to add 5 buttons with the above 3D style. You can remove or add the CSS and the corresponding HTML to add or remove buttons and change the color and styles.
Step #1 – Adding Button CSS
The first step is to decide whether you want to add the buttons only on few pages or many pages on your site. If you want to add on few pages then add the CSS code only to those pages under “Pages > Select a Page > SEO Settings > Header Code” as shown below:
If you want to add the buttons on multiple pages then it is recommended to add the CSS styles in an external style sheet and link to the page. Weebly by default has only one external style sheet per site. Go to “Theme > Edit HTML / CSS > Styles > main.less” section. Locate the file and add the code at the bottom of other existing codes. Save your changes and exit the code editor.
When using code editor, you need to save the theme with a custom name. If you do not want to edit the theme, go to “Settings > SEO > Header Code” section. Here, you can add the CSS code which will be applied to all pages on your site (similar to editing main.less file).
Here is the CSS code for 3D buttons:
<style type="text/CSS">
a.css3dbutton {
background: #c1e75c;
color: black;
text-decoration: none;
font: bold 18px Arial;
position: relative;
display: inline-block;
margin-right: 15px;
padding: 15px;
border-radius: 85px;
width: 85px;
height: 85px;
outline: none;
box-shadow: 0 8px 0 #8dab3b,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton span.outer{
text-align: center;
width: 100%;
display: block;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
a.css3dbutton span.outer span.top{
display: block;
padding-bottom: 4px;
}
a.css3dbutton span.outer span.bottom{
border-top: 1px solid black;
padding-top: 4px;
display: block;
text-transform: uppercase;
line-height: 12px;
font-size: 60%;
}
a.css3dbutton:hover {
background: #9cc62b;
box-shadow: none;
-ms-transform: translateY(8px);
-webkit-transform: translate3D(0, 8px, 0);
-moz-transform: translateY(8px);
transform: translate3D(0, 8px, 0);
}
a.css3dbutton.blue{
background: #a6e9f7;
box-shadow: 0 8px 0 #529dad,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.blue:hover {
background: #66cbe1;
box-shadow: none;
}
a.css3dbutton.pink{
background: #fbbaba;
box-shadow: 0 8px 0 #d74848,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.pink:hover {
background: #ea6161;
box-shadow: none;
}
a.css3dbutton.yellow{
background: #f3fa86;
box-shadow: 0 8px 0 #dbcd2f,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.yellow:hover {
background: #ecd347;
box-shadow: none;
}
a.css3dbutton.brown{
background: #e0c87e;
box-shadow: 0 8px 0 #b3805b,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.brown:hover {
background: #b3805b;
box-shadow: none;
}
</style>
Learn more on how to edit source CSS / HTML in Weebly.
Step #2 – Adding HTML Code
Drag and drop an embed code element on a page where you want to add the buttons and paste the below code inside. Don’t forget to replace # with your own links.
<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>
Step #3 – Customizing the Buttons
There are endless possibilities to customize the buttons as you need. Here are some general scenario you might be looking for.
Adding or Removing Buttons
Assume you only need 3 buttons instead of 5 as shown in the example. In this case you can delete the code for 4th and 5th buttons from both CSS and HTML. But we would recommend adding the maximum number of styles in CSS and then control the number of buttons in HTML. In this scenario, where you only need 3 buttons, leave the CSS code as it is which has 5 different styles defined and add HTML code only for 3 buttons.
In this manner, you can add 3 buttons on one page, 5 buttons on another page and so on.
Customizing the Colors and Size
- You can change the text color and the color of the button attributes like background and shadow.
- Change the width and height attributes to change the round button to oval size or any other proportions.
Remember, you can use spacer element to add sufficient space above and below the buttons. Similarly, you can place the button in right or left side of any other element using spacer.
Leave a Reply
Your email is safe with us.