Simple 3D Button With HTML and CSS

Simple 3D Button With HTML and CSS (Code + Demo)

3D Button With CSS

In this article, you will learn how to create a 3D button using HTML and CSS. Different types of HTML buttons can be created. Earlier I showed you how to make neon, animated, gradient, etc. buttons. You can follow our site 3dcityplanner.com to see other types of Simple 3D Button tutorials.

However, it is a complete CSS 3D button that will make your ordinary button more attractive. A simple button has been converted to 3d using some simple CSS.

How to Create a 3D Button With CSS

Only one line of HTML and some amount of CSS are used here. First, we created a button using the button function of HTML. Then I designed it using some amount of CSS and then added a 3d effect to it.

See the Pen
3D Button by Shantanu Jana (@shantanu-jana)
on CodePen.

Looking at the button in normal condition, it seems that the button is slightly upwards. When you click on the button, the button becomes simple and the 3D effect is hidden. Below is a preview that will help you learn how this Simple 3D Button works.

Step 1: Basic structure of the button

I have created the basic structure of the button using the following HTML and CSS codes. The button function of HTML is used to create the button. Then I designed that page using some code.

<button>HOVER</button>
body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe5e6;
}
Basic structure of the button

Step 2: Design the 3D Button with CSS

Now the button has been designed. I used the following codes to design the button and make it 3D. Added a 3d effect to the text of the button. 

The text-shadow is used to convert the text here and the box shadow is used to make the button 3D.

button {
  background: hsl(0, 100%, 73%);
  color: white;
  padding: .7em 3em;
  border: none;
  border-radius: 10em;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .15em;
  outline: none;
  font-weight: 900;
  cursor: pointer;
  transition: all .5s cubic-bezier(0.215, 0.61, 0.355, 1);;
  font-family: ‘Oswald’, sans-serif;
  text-shadow:  0 1px hsl(0, 0%, 80%),
0 2px hsl(0, 0%, 78%),
0 3px hsl(0, 0%, 75%),
0 3px 5px hsl(0, 0%, 0%, .4),
0 4px 20px hsl(0, 0%, 0%, .35);
  box-shadow: 0 1px hsl(0, 100%, 75%),
0 2px hsl(0, 100%, 69%),
0 3px hsl(0, 100%, 68%),
0 4px hsl(0, 100%, 68%),
0 5px hsl(0, 100%, 68%),
0 6px hsl(0, 100%, 68%),
0 7px hsl(0, 100%, 68%),
0 8px hsl(0, 100%, 68%),
0 9px hsl(0, 100%, 68%),
0 10px hsl(0, 100%, 68%),
0 11px hsl(0, 100%, 68%),
0 12px hsl(0, 100%, 68%),
0 13px hsl(0, 100%, 68%),
        0 14px hsl(0, 100%, 68%),
0 15px hsl(0, 100%, 68%),
0 16px hsl(0, 100%, 68%),
0 17px hsl(0, 100%, 68%),
0 18px hsl(0, 100%, 68%),
0 19px hsl(0, 100%, 68%),
0 20px hsl(0, 100%, 68%),
0 21px hsl(0, 100%, 68%),
0 22px hsl(0, 100%, 68%),
0 23px hsl(0, 100%, 68%),
0 23px 10px hsla(0, 0%, 0%, .8),
0 25px 50px hsla(0, 0%, 0%, .5)
}
3D Button with CSS

Step 3: Add hover to the 3D Button

Now the hover effect has been added to the button. When you move or click the mouse on the button, all the shadows on the button will be removed.

button:hover {
  background: hsl(0, 100%, 72%);
  box-shadow: none;
  text-shadow: none;
  transform: translateY(25px);
 }
hover to the 3D Button

Hopefully using the above code you can find out how this Simple 3D Button was created using HTML and CSS. If you want to download the source code of this CSS 3D Button then use the button below.