3D Buttons with CSS Dropshadow and Transitions

Today I’d like to share some 3d buttons styles, made with CSS drop shadow. I used a box-shadow to simulate the 3d effect and also added some CSS transitions to make it look smooth when you click the buttons. There are 8 buttons in total.

Below you can see the code for the base button and the 4 basic styles. Editing these 4 styles, you should be able to achieve the other 4. Also, feel free to download the source code and play around with it, and let me know what have you come up with.

Creating the Button

The first thing we need to do is create a simple HTML button.

<button class="">I am a Button!</button>

Then we add the basic styling to make it look like better:

button {
    /*  */
    position:relative;
    padding:35px;
    margin:30px;
    width:350px;
    /* Font Styling */
    font-size:30px;
    font-weight:bold;
    color:#FFF;
    }

Button with Drop Shadow On the bottom

After we have the basic button styled and ready, all we have to do is add a new class, in this case, “down” and add the shadow effect to it, like so.. :

<button class="down">I am a Button!</button>

Of course, we need to style that class first:

/* Styling the Button */
.down {
    -webkit-transition: margin-top 0.3s ease, box-shadow 0.3s ease ;
    -moz-transition: margin-top 0.3s ease, box-shadow 0.3s ease;
    transition: margin-top 0.3s ease, box-shadow 0.3s ease;

    background:#1abc9c;
    border: solid 1px #16a085;

    -webkit-box-shadow: 0px 9px 0px #16a085;
    -moz-box-shadow: 0px 9px 0px #16a085;
    box-shadow: 0px 9px 0px #16a085;
}

/* When the button is clicked */
.down:active{
    -webkit-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
    transition: margin-top 0.2s ease, box-shadow 0.2s ease;

    margin-top:9px;

    -webkit-box-shadow: 0px 0px 0px #16a085;
    -moz-box-shadow: 0px 0px 0px #16a085;
    box-shadow: 0px 0px 0px #16a085;
}

Button with Drop Shadow On the Right

To have the 3d effect on the right, all we go to do is change the box-shadow values, from box-shadow: 0px 9px 0px #16a085; to box-shadow: 9px 0px 0px #8e44ad;

.right {
    background:#9b59b6;
    border: solid 1px #8e44ad;

    -webkit-box-shadow: 9px 0px 0px #8e44ad;
    -moz-box-shadow: 9px 0px 0px #8e44ad;
    box-shadow: 9px 0px 0px #8e44ad;

    -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
    transition: margin-left 0.2s ease, box-shadow 0.2s ease;
}

.right:active{
    margin-left:9px;

    -webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
    transition: margin-left 0.2s ease, box-shadow 0.2s ease;

    -webkit-box-shadow: 0px 0px 0px #8e44ad;
    -moz-box-shadow: 0px 0px 0px #8e44ad;
    box-shadow: 0px 0px 0px #8e44ad;
}

Button with Drop Shadow On the Right and Bottom

To have dropshadow on both right side and bottom, we’ll have to add multiple shadows to simulate the smoothness of the shadow.

.rightBottom {
    transition: margin-top 0.3s ease,
    margin-left 0.3s ease,
    box-shadow 0.3s ease;

    background:#03A9F4;
    border: solid 1px #1976D2;

    box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
    2px 1px 0px #1976D2,1px 2px 0px #1976D2,
    3px 2px 0px #1976D2,2px 3px 0px #1976D2,
    4px 3px 0px #1976D2,3px 4px 0px #1976D2,
    5px 4px 0px #1976D2,4px 5px 0px #1976D2,
    6px 5px 0px #1976D2,5px 6px 0px #1976D2,
    7px 6px 0px #1976D2,6px 7px 0px #1976D2,
    8px 7px 0px #1976D2,7px 8px 0px #1976D2,
    9px 8px 0px #1976D2,8px 9px 0px #1976D2;
}

.rightBottom:active{
    transition: margin-top 0.3s ease;
    margin-left 0.3s ease,
    box-shadow 0.3s ease;

    margin-left:9px;
    margin-top:9px;

    box-shadow: 0px 0px 0px #1976D2;
}

Button with Drop Shadow On the Left and Top

To have the shadows on the left side and on top, all u need is to add minuses ( – ) in front of each number.

.leftTop {
    transition: margin-top 0.3s ease,
    margin-left 0.3s ease,
    box-shadow 0.3s ease;

    background:#4CAF50;
    border: solid 1px #388E3C;

    box-shadow: -1px -0px 0px #388E3C,-0px -1px 0px #388E3C,
    -2px -1px 0px #388E3C,-1px -2px 0px #388E3C,
    -3px -2px 0px #388E3C,-2px -3px 0px #388E3C,
    -4px -3px 0px #388E3C,-3px -4px 0px #388E3C,
    -5px -4px 0px #388E3C,-4px -5px 0px #388E3C,
    -6px -5px 0px #388E3C,-5px -6px 0px #388E3C,
    -7px -6px 0px #388E3C,-6px -7px 0px #388E3C,
    -8px -7px 0px #388E3C,-7px -8px 0px #388E3C,
    -9px -8px 0px #388E3C,-8px -9px 0px #388E3C;
}

.leftTop:active{
    transition: margin-top 0.3s ease,
    margin-left 0.3s ease,
    box-shadow 0.3s ease;

    margin-left:-10px;
    margin-top:-10px;

    box-shadow: 0px 0px 0px #388E3C;
}

If you have any questions, suggestions, and/or feedback related to this, feel free to leave a comment down below!