Creating 3D Icon Buttons Using HTML/CSS

The current mainstream trend is flat design, and material design is less commonly seen. Therefore, we’ll analyze how to achieve this 3D button purely from a technical perspective using HTML/CSS.

The three-dimensional effect of this button is primarily highlighted by the additional left and bottom sides of the button. We can simulate these two sides using ‘box-shadow.’ Below is the specific code:

HTML

  <button class="cssbuttons-io-button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path>
    </svg>
    <span>Add</span>
  </button>

CSS

.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  padding: 0.7em 1.4em 0.7em 1.1em;
  color: white;
  background: #ad5389;
  background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);
  border: none;
  box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-right: 6px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
}

.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #14a73e98;
}

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>
    .cssbuttons-io-button {
      display: flex;
      align-items: center;
      font-family: inherit;
      font-weight: 500;
      font-size: 16px;
      padding: 0.7em 1.4em 0.7em 1.1em;
      color: white;
      background: #ad5389;
      background: linear-gradient(0deg, rgba(20, 167, 62, 1) 0%, rgba(102, 247, 113, 1) 100%);
      border: none;
      box-shadow: 0 0.7em 1.5em -0.5em #14a73e98;
      letter-spacing: 0.05em;
      border-radius: 20em;
    }

    .cssbuttons-io-button svg {
      margin-right: 6px;
    }

    .cssbuttons-io-button:hover {
      box-shadow: 0 0.5em 1.5em -0.5em #14a73e98;
    }

    .cssbuttons-io-button:active {
      box-shadow: 0 0.3em 1em -0.5em #14a73e98;
    }
  </style>
</head>

<body>
  <button class="cssbuttons-io-button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path fill="none" d="M0 0h24v24H0z"></path>
      <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path>
    </svg>
    <span>Add</span>
  </button>
</body>

</html>

THE END