Weebly Tricks #80 - Depressible Action Buttons

Oh great, Pro Accounts can now accommodate up to 100 members but we aren't talking about now. Today, I would you to learn how to add these simple hover effect that makes a button seems depressing when pointing in you mouse. This is another great way to enhance the click conversion of your call to actions button.

CLICK HERE FOR LIVE DEMO

We will be using CSS3 effects so it will be very easy to understand and apply on your site. Just read the instruction on how to use the codes.

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
a.css3dbutton {
    background: #c1e75c; /* default green background color of button */
    color: black;
    text-decoration: none;
    font: bold 18px Arial; /* font size and style */
    position: relative;
    display: inline-block;
    margin-right: 15px; /* spacing between multiple buttons */
    padding: 15px; /* padding inside button */
    border-radius: 85px; /* border radius of button */
    width: 85px; /* dimensions of button */
    height: 85px;
    outline: none;
    box-shadow: 0 8px 0 #8dab3b, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
    -moz-transition: all 0.2s ease-in-out; /* transition style and duration */
    -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{ /* outermost text container */
    text-align: center;
    width: 100%;
    display: block;
    position: relative;
    top: 50%; /* center element */
    -webkit-transform: translateY(-50%); /* center element */
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

a.css3dbutton span.outer span.top{ /* top line */
    display: block;
    padding-bottom: 4px;
}

a.css3dbutton span.outer span.bottom{ /* bottom line */
    border-top: 1px solid black;
    padding-top: 4px;
    display: block;
    text-transform: uppercase;
    line-height: 12px;
    font-size: 60%;
}


a.css3dbutton:hover {
    background: #9cc62b; /* background color when mouse rolls over button */
    box-shadow:  none;
    -ms-transform: translateY(8px); /* shift button downwards by shadow depth amount */
    -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, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.blue:hover {
    background: #66cbe1; /* background color when mouse rolls over button */
    box-shadow: none;
}

a.css3dbutton.pink{
    background: #fbbaba;
    box-shadow: 0 8px 0 #d74848, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.pink:hover {
    background: #ea6161; /* background color when mouse rolls over button */
    box-shadow: none;
}

a.css3dbutton.yellow{
    background: #f3fa86;
    box-shadow: 0 8px 0 #dbcd2f, /* depth and color of main shadow */
        0 0 3px rgba(0,0,0, 0.2),
        0 20px 20px #eee;
}

a.css3dbutton.yellow:hover {
    background: #ecd347; /* background color when mouse rolls over button */
    box-shadow: none;
}

</style>
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>

---

BODY CODE
Where to place these codes? Click Here!

---

<a href="http://herooflegends.blogspot.com/" class="css3dbutton pink">
<span class="outer">
<span class="top">Sign Up!</span>
<span class="bottom">It's free and fast</span>
</span>
</a>

Notes:

Red text - This will be the color of your button, possible values are: pink, yellow, blue and if you didn't specify the color it will become green which is the default.

Green text - These strings will be your text.
Blue text - The site you're pointing to when the button is pressed.

---

CONCLUSION

---

The color is brilliant, very simple yet pleasing to the eyes.

Anyway, as I have told earlier, you can now have 100 members (from 20) on your website using your PRO account. This will surely boost your site's capabilities.

Subscribe now for more easy but useful widgets that can be added on your site.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!