Creating a 3D Search Button Using HTML/CSS

In web design and development, the search button is an essential component that provides users with a quick way to find the information they need. However, traditional search buttons often appear dull and lack attractiveness and personalization. To break away from this monotony, we can utilize HTML and CSS to create a 3D search button, adding a unique visual effect to the webpage.

Here is the specific code:

HTML

<button class="button">
  <span class="span">🔎</span>
</button>

CSS

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e8e8;
  background-color: #212121;
  width: 70px;
  height: 70px;
  font-size: 24px;
  text-transform: uppercase;
  border: 2px solid #212121;
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),
    2px 2px 2px rgba(0, 0, 0, 0.1),
    -3px -3px 2px rgba(255, 255, 255, 0.05),
    -2px -2px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
}

.button .span {
  position: relative;
  z-index: 2;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "";
  position: absolute;
  background-color: #e8e8e8;
  width: 100%;
  height: 100%;
  left: 0%;
  bottom: 0%;
  transform: translate(-100%, 100%);
  border-radius: 10px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  transform: translate(0,0);
  transition-delay: 0.4s;
}

.button:hover .span {
  scale: 1.2;
}

.button:hover {
  box-shadow: none;
}

.button:active {
  scale: 0.95;
}

HTML & CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e8e8e8;
      background-color: #212121;
      width: 70px;
      height: 70px;
      font-size: 24px;
      text-transform: uppercase;
      border: 2px solid #212121;
      border-radius: 10px;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
      box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.15),
        2px 2px 2px rgba(0, 0, 0, 0.1),
        -3px -3px 2px rgba(255, 255, 255, 0.05),
        -2px -2px 1px rgba(255, 255, 255, 0.05);
      overflow: hidden;
      cursor: pointer;
    }

    .button .span {
      position: relative;
      z-index: 2;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    }

    .button::before {
      content: "";
      position: absolute;
      background-color: #e8e8e8;
      width: 100%;
      height: 100%;
      left: 0%;
      bottom: 0%;
      transform: translate(-100%, 100%);
      border-radius: 10px;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    }

    .button:hover::before {
      transform: translate(0, 0);
      transition-delay: 0.4s;
    }

    .button:hover .span {
      scale: 1.2;
    }

    .button:hover {
      box-shadow: none;
    }

    .button:active {
      scale: 0.95;
    }
  </style>
</head>

<body>
  <button class="button">
    <span class="span">🔎</span>
  </button>
</body>

</html>

THE END