Back

Beautiful 3D button

Tutorial on how to create a beautiful 3D button using only CSS&HTML.

HTML

For HTML we have only one button element with "CLICK" text.


        <button>CLICK</button>

CSS

Now we'll set some basic styling to a button. First we'll remove button's default border, by setting border property to none. We'll set the background color to #976D70 and text color to #fff. We'll add some padding so it looks nice. And of course the transition. So the hover effect, which we'll add later, is nice and smooth. We'll set the border radius to 6px. Now we'll add two shadows. The first one (#665367 0 7px 2px) represents the bottom side of the button, which creates a 3d effect, and the second one (#000 0 8px 6px) is the actual shadow. The first one (#665367 0 7px 2px) represents the bottom side of the button, which creates a 3d effect, and the second one (#000 0 8px 6px) is the actual shadow.


        button {
            border: none;
            background-color: #976D70;
            color: #fff;
            padding: 10px 20px;
            transition: .2s;
            border-radius: 6px;
            box-shadow: #665367 0 7px 2px, #000 0 8px 6px;
            cursor: pointer;
        }

When active (on click), we'll transform the button by 8px and decrease the shadows. That will create button press effect.


        button:active {
            transform: translateY(8px);
            box-shadow: #665367 0 0 0, #000 0 0 3px;
        }

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<button>CLICK</button>

<style>
button {
  border: none;
  background-color: #976D70;
  color: #fff;
  padding: 10px 20px;
  transition: .2s;
  border-radius: 6px;
  box-shadow: #665367 0 7px 2px, #000 0 8px 6px;
  cursor: pointer;
}
button:active {
  transform: translateY(8px);
  box-shadow: #665367 0 0 0, #000 0 0 3px;
}

</style>

Thank you for reading this article.

Beautiful 3D button

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also