How To Make A 3D Pressable Button with CSS For Blogger

Do you guys looking for 3D pressable button and want to know how to make a 3D pressable button with CSS in blogger then you come to right place.

These days, affiliate marketing is emerging trend in blogging, Many newbies are focusing on affiliate marketing to earn some handsome money by selling products. 

If you are promoting products then you must focus on landing page. it should be such that each visitor turns into conversion. If you optimize the buy it Now button or sign up button or social subscribe buttons with 3D graphics then it would more spice to the landing page. Thus, I am coming with the trick and tips to create a 3D pressable button in blogger.

Now I provide you a very clean and simple trick of CSS. With this simple trick you can make your own 3D Pressable Button in Blogger's Blog Homepage or in any post of your Blog. 

You can also add this 3D Pressable Button in any Widget of Blog. This Button is well-formed and you can use this button in Blog to provide various functions like Home, Next, Previous, Download etc. Here is the clean and simple trick of CSS (Cascading Style Sheet).

Here is the image of the 3D Pressable Button.

This is the Live Demo of the 3D Pressable Button.

Click Here!

This Button is free of cost and you can add this button by this way.

• Go to www.blogger.com and Login to your account.
• Click on New Post and paste this CSS in your post.

CSS

---

<style>

a.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 28px Arial; /* font size and style */
    position: relative;
top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -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, a.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}

a.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray;
}

a.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}

a.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}

</style>

---

HTML

---

<a href="#" class="css3dbutton">Sign Up!</a>

---

You can Customise "#" with your Link.
You can Customise "Sign Up!" with your Text.

You can also add 3D accordion widget to get more exposure to your website. here is the procedure to accelerate performance of your blog.