Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp
3d_btn.png

How to create a 3d button with CSS

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

Do you need a realistic 3d button for your website ?
Check The code I have posted below.

The HTML

    <button>Click Me</button>

The CSS

    button {
    background: #2f2f2f;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #c4c4c4;
    box-shadow: 1px 1px 5px #000, -1px -1px 5px #6f6f6f, inset 1px 1px 5px #2b2b2b, inset -1px -1px 5px #424242;
    transition: all 0.1s;
}

body {
    background: #2f2f2f;
}

button:active {
    box-shadow: 1px 1px 5px #5b5b5b, -1px -1px 5px #000, inset 1px 1px 5px #5b5b5b, inset -1px -1px 5px #000;
}

How It Will Look Like

That's all . I'm Sure you are enjoying this. If You have problems or suggestions please let me know.

Subscribe on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.