3D CSS Press Buttons Widget for Weebly Site

In our previous article we saw how to add and customize default Weebly button element. But modifying the 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 embed code element. Though the customization aspect is rigid in embedding you can easily create an attractive buttons with CSS effects. Here we explain how to add 3D CSS press buttons in Weebly site as shown below.

CSS 3D Buttons

The buttons have the following features:

  • No images are required which improves the site loading speed and your efforts spend 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 page on your site or to an external site.

How to Add 3D CSS Press Buttons in Weebly?

We will explain here how to add 5 buttons with the following 3D style. You can remove or add the CSS and the corresponding HTML to add or remove buttons and change the color and styles.

Adding Button CSS

Before the code, 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:

Related:  Bootstrap 4 Badge Tutorial
Add Code in Weebly Page Header
Add Code in Weebly Page Header

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 under “Theme > Edit HTML / CSS > Styles > main.less” and add the code inside this file.

Modifying Main Style CSS in Weebly
Modifying Main Style CSS in Weebly

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.

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>

Customizing the Buttons

There are endless possibilities to customize the buttons as you need. Here are some general scenario you might be looking for.

Related:  How to Add Gradient Text Box in Weebly?

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.
Recommended Articles:

Leave a Comment