Creating a Print Icon Button Using HTML/CSS-PANDA

In today’s digital era, printing remains an essential need. To facilitate users in quickly locating and utilizing the print function, many websites and applications offer a print button. Using HTML and CSS, we can craft an appealing print icon button to enhance the user’s operational experience.

Here is the specific code:

HTML

<button class="print-btn">
  <span class="printer-wrapper">
    <span class="printer-container">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 92 75">
        <path
          stroke-width="5"
          stroke="black"
          d="M12 37.5H80C85.2467 37.5 89.5 41.7533 89.5 47V69C89.5 70.933 87.933 72.5 86 72.5H6C4.067 72.5 2.5 70.933 2.5 69V47C2.5 41.7533 6.75329 37.5 12 37.5Z"
        ></path>
        <mask fill="white" id="path-2-inside-1_30_7">
          <path
            d="M12 12C12 5.37258 17.3726 0 24 0H57C70.2548 0 81 10.7452 81 24V29H12V12Z"
          ></path>
        </mask>
        <path
          mask="url(#path-2-inside-1_30_7)"
          fill="black"
          d="M7 12C7 2.61116 14.6112 -5 24 -5H57C73.0163 -5 86 7.98374 86 24H76C76 13.5066 67.4934 5 57 5H24C20.134 5 17 8.13401 17 12H7ZM81 29H12H81ZM7 29V12C7 2.61116 14.6112 -5 24 -5V5C20.134 5 17 8.13401 17 12V29H7ZM57 -5C73.0163 -5 86 7.98374 86 24V29H76V24C76 13.5066 67.4934 5 57 5V-5Z"
        ></path>
        <circle fill="black" r="3" cy="49" cx="78"></circle>
      </svg>
    </span>

    <span class="printer-page-wrapper">
      <span class="printer-page"></span>
    </span>
  </span>
  Print
</button>

CSS

.print-btn {
  width: 100px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid rgb(213, 213, 213);
  border-radius: 10px;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  font-weight: 500;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.065);
  transition: all 0.3s;
}
.printer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
}
.printer-container {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.printer-container svg {
  width: 100%;
  height: auto;
  transform: translateY(4px);
}
.printer-page-wrapper {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.printer-page {
  width: 70%;
  height: 10px;
  border: 1px solid black;
  background-color: white;
  transform: translateY(0px);
  transition: all 0.3s;
  transform-origin: top;
}
.print-btn:hover .printer-page {
  height: 16px;
  background-color: rgb(239, 239, 239);
}
.print-btn:hover {
  background-color: rgb(239, 239, 239);
}

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>
    .print-btn {
      width: 100px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      border: 1px solid rgb(213, 213, 213);
      border-radius: 10px;
      gap: 10px;
      font-size: 16px;
      cursor: pointer;
      overflow: hidden;
      font-weight: 500;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.065);
      transition: all 0.3s;
    }

    .printer-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 100%;
    }

    .printer-container {
      height: 50%;
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .printer-container svg {
      width: 100%;
      height: auto;
      transform: translateY(4px);
    }

    .printer-page-wrapper {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .printer-page {
      width: 70%;
      height: 10px;
      border: 1px solid black;
      background-color: white;
      transform: translateY(0px);
      transition: all 0.3s;
      transform-origin: top;
    }

    .print-btn:hover .printer-page {
      height: 16px;
      background-color: rgb(239, 239, 239);
    }

    .print-btn:hover {
      background-color: rgb(239, 239, 239);
    }
  </style>
</head>

<body>

  <button class="print-btn">
    <span class="printer-wrapper">
      <span class="printer-container">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 92 75">
          <path stroke-width="5" stroke="black"
            d="M12 37.5H80C85.2467 37.5 89.5 41.7533 89.5 47V69C89.5 70.933 87.933 72.5 86 72.5H6C4.067 72.5 2.5 70.933 2.5 69V47C2.5 41.7533 6.75329 37.5 12 37.5Z">
          </path>
          <mask fill="white" id="path-2-inside-1_30_7">
            <path d="M12 12C12 5.37258 17.3726 0 24 0H57C70.2548 0 81 10.7452 81 24V29H12V12Z"></path>
          </mask>
          <path mask="url(#path-2-inside-1_30_7)" fill="black"
            d="M7 12C7 2.61116 14.6112 -5 24 -5H57C73.0163 -5 86 7.98374 86 24H76C76 13.5066 67.4934 5 57 5H24C20.134 5 17 8.13401 17 12H7ZM81 29H12H81ZM7 29V12C7 2.61116 14.6112 -5 24 -5V5C20.134 5 17 8.13401 17 12V29H7ZM57 -5C73.0163 -5 86 7.98374 86 24V29H76V24C76 13.5066 67.4934 5 57 5V-5Z">
          </path>
          <circle fill="black" r="3" cy="49" cx="78"></circle>
        </svg>
      </span>

      <span class="printer-page-wrapper">
        <span class="printer-page"></span>
      </span>
    </span>
    Print
  </button>


</body>

</html>

THE END