使用纯CSS实现3D按钮效果

.button-3d {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background: #007bff; /* Blue */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  /* Add a subtle box-shadow for depth */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.button-3d::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #0056b3; /* Darker Blue */
  border-radius: 5px;
  transform: translateZ(-4px); /* Move the pseudo-element back */
  z-index: -1; /* Place the pseudo-element behind the button */
  transition: transform 0.3s ease;
}

.button-3d:hover {
  transform: translateY(-2px); /* Move the button up slightly */
}

.button-3d:hover::before {
  transform: translateZ(-2px); /* Move the pseudo-element less back on hover */
}

/* Example variations with different colors */
.button-3d.green {
  background: #28a745; /* Green */
}

.button-3d.green::before {
  background: #1e7e34; /* Darker Green */
}

.button-3d.red {
  background: #dc3545; /* Red */
}

.button-3d.red::before {
  background: #bd2130; /* Darker Red */
}

/* Active state - adds a pressed effect */
.button-3d:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Darker shadow on active */
}

.button-3d:active::before {
  transform: translateZ(-1px); /* Bring pseudo-element closer on active */
}

Explanation:

1. position: relative; on the button: This allows us to absolutely position the pseudo-element (::before) relative to the button.

2. ::before pseudo-element: This creates the "back" of the 3D effect. We give it a slightly darker background color and use transform: translateZ(-4px); to move it backwards in 3D space. z-index: -1; ensures it's behind the main button.

3. transform: translateY(-2px); on hover: This moves the button slightly up on hover, creating the illusion of it being lifted.

4. transform: translateZ(-2px); on hover for ::before: This moves the back face less backwards on hover, enhancing the 3D effect.

5. box-shadow: A subtle box shadow adds to the depth effect.

6. Active State: The :active styles simulate a button press by moving the button down slightly and darkening the box shadow.

7. Color Variations: The example includes CSS classes for green and red button variations. You can easily customize these or add more.

How to use it:

<button class="button-3d">Blue Button</button>
<button class="button-3d green">Green Button</button>
<button class="button-3d red">Red Button</button>

This CSS creates a convincing 3D button effect without any JavaScript or images, relying solely on CSS transforms and pseudo-elements. Remember to adjust colors and sizes to fit your design.