Creating CodePen Icon Button Using HTML/CSS

In the field of web development and design, CodePen is a highly popular platform that provides developers with an online, real-time collaborative environment for writing and showcasing HTML, CSS, and JavaScript code. This platform is also known for its distinctive logo and brand design. In our project, we will use HTML and CSS to create a button resembling the CodePen icon, showcasing CodePen’s unique style.

Here is the specific code:

HTML

<button class="Btn">
  <span class="svgContainer">
    <svg
      viewBox="0 0 512 512"
      fill="white"
      height="1.6em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M502.3 159.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156C3.7 163.7 0 170.8 0 178v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V178c0-7.1-3.7-14.3-9.7-18.3zM278 63.1l172.3 114.9-76.9 51.4L278 165.7V63.1zm-44 0v102.6l-95.4 63.7-76.9-51.4L234 63.1zM44 219.1l55.1 36.9L44 292.8v-73.7zm190 229.7L61.7 334l76.9-51.4L234 346.3v102.6zm22-140.9l-77.7-52 77.7-52 77.7 52-77.7 52zm22 140.9V346.3l95.4-63.7 76.9 51.4L278 448.8zm190-156l-55.1-36.9L468 219.1v73.7z"
      ></path>
    </svg>
  </span>
  <span class="BG"></span>
</button>

CSS

.Btn {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  /* overflow: hidden; */
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #181818;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
  backdrop-filter: blur(4px);
}

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>
    .Btn {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background-color: transparent;
      position: relative;
      /* overflow: hidden; */
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .svgContainer {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      backdrop-filter: blur(0px);
      letter-spacing: 0.8px;
      border-radius: 10px;
      transition: all 0.3s;
      border: 1px solid rgba(156, 156, 156, 0.466);
    }

    .BG {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: #181818;
      z-index: -1;
      border-radius: 10px;
      pointer-events: none;
      transition: all 0.3s;
    }

    .Btn:hover .BG {
      transform: rotate(35deg);
      transform-origin: bottom;
    }

    .Btn:hover .svgContainer {
      background-color: rgba(156, 156, 156, 0.466);
      backdrop-filter: blur(4px);
    }
  </style>
</head>

<body>

  <button class="Btn">
    <span class="svgContainer">
      <svg viewBox="0 0 512 512" fill="white" height="1.6em" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M502.3 159.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156C3.7 163.7 0 170.8 0 178v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V178c0-7.1-3.7-14.3-9.7-18.3zM278 63.1l172.3 114.9-76.9 51.4L278 165.7V63.1zm-44 0v102.6l-95.4 63.7-76.9-51.4L234 63.1zM44 219.1l55.1 36.9L44 292.8v-73.7zm190 229.7L61.7 334l76.9-51.4L234 346.3v102.6zm22-140.9l-77.7-52 77.7-52 77.7 52-77.7 52zm22 140.9V346.3l95.4-63.7 76.9 51.4L278 448.8zm190-156l-55.1-36.9L468 219.1v73.7z">
        </path>
      </svg>
    </span>
    <span class="BG"></span>
  </button>


</body>

</html>

THE END