Creating a Copy Effect Button Using HTML/CSS

In web design and development, providing users with convenient copy functionality is crucial. Copy function buttons not only allow users to quickly duplicate text content but also enhance work efficiency. However, traditional copy buttons often lack creativity and visual appeal. To offer users a better experience, we can implement a copy function button with effects using HTML and CSS.

This effect button will showcase a unique animation when clicked by the user, attracting their attention while clearly conveying the function of copying.

Here is the specific code:

HTML

<div class="icon-conatiner">
  <svg
    width="19px"
    height="21px"
    viewBox="0 0 19 21"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Group</title>
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="Artboard" transform="translate(-142.000000, -122.000000)">
        <g id="Group" transform="translate(142.000000, 122.000000)">
          <path
            d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
            id="Rectangle-Copy"
            fill="#C4FFE4"
          ></path>
          <path
            d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
            id="Rectangle"
            fill="#85EBBC"
          ></path>
          <path
            d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"
            id="Path-2"
            fill="#64B18D"
          ></path>
        </g>
      </g>
    </g>
  </svg>
  <svg
    width="19px"
    height="21px"
    viewBox="0 0 19 21"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Group</title>
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd"
    >
      <g id="Artboard" transform="translate(-142.000000, -122.000000)">
        <g id="Group" transform="translate(142.000000, 122.000000)">
          <path
            d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
            id="Rectangle-Copy"
            fill="#C4FFE4"
          ></path>
          <path
            d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
            id="Rectangle"
            fill="#85EBBC"
          ></path>
          <path
            d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z"
            id="Path-2"
            fill="#64B18D"
          ></path>
        </g>
      </g>
    </g>
  </svg>
</div>

CSS

.icon-conatiner {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 0 #ababab4d;
  cursor: pointer;
}

.icon-conatiner svg {
  width: 50px;
  height: auto;
}

.icon-conatiner svg:last-child {
  position: absolute;
}

.icon-conatiner:active {
  animation: press 0.2s 1 linear;
}

.icon-conatiner:active svg:last-child {
  animation: bounce 0.2s 1 linear;
}

.text {
  color: #666;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  user-select: none;
}

@keyframes press {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.92);
  }

  to {
    transform: scale(1);
  }
}

@keyframes bounce {
  50% {
    transform: rotate(5deg) translate(20px, -50px);
  }

  to {
    transform: scale(0.9) rotate(10deg) translate(50px, -80px);
    opacity: 0;
  }
}

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>
    .icon-conatiner {
      width: 150px;
      height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 15px;
      box-shadow: 20px 20px 15px 0 #ababab4d;
      cursor: pointer;
    }

    .icon-conatiner svg {
      width: 50px;
      height: auto;
    }

    .icon-conatiner svg:last-child {
      position: absolute;
    }

    .icon-conatiner:active {
      animation: press 0.2s 1 linear;
    }

    .icon-conatiner:active svg:last-child {
      animation: bounce 0.2s 1 linear;
    }

    .text {
      color: #666;
      font-family: sans-serif;
      font-size: 16px;
      font-weight: bold;
      margin-top: 20px;
      user-select: none;
    }

    @keyframes press {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(0.92);
      }

      to {
        transform: scale(1);
      }
    }

    @keyframes bounce {
      50% {
        transform: rotate(5deg) translate(20px, -50px);
      }

      to {
        transform: scale(0.9) rotate(10deg) translate(50px, -80px);
        opacity: 0;
      }
    }
  </style>
</head>

<body>

  <div class="icon-conatiner">
    <svg width="19px" height="21px" viewBox="0 0 19 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Group</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-142.000000, -122.000000)">
          <g id="Group" transform="translate(142.000000, 122.000000)">
            <path
              d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
              id="Rectangle-Copy" fill="#C4FFE4"></path>
            <path
              d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
              id="Rectangle" fill="#85EBBC"></path>
            <path d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z" id="Path-2"
              fill="#64B18D"></path>
          </g>
        </g>
      </g>
    </svg>
    <svg width="19px" height="21px" viewBox="0 0 19 21" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>Group</title>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-142.000000, -122.000000)">
          <g id="Group" transform="translate(142.000000, 122.000000)">
            <path
              d="M3.4,4 L11.5,4 L11.5,4 L16,8.25 L16,17.6 C16,19.4777681 14.4777681,21 12.6,21 L3.4,21 C1.52223185,21 6.74049485e-16,19.4777681 0,17.6 L0,7.4 C2.14128934e-16,5.52223185 1.52223185,4 3.4,4 Z"
              id="Rectangle-Copy" fill="#C4FFE4"></path>
            <path
              d="M6.4,0 L12,0 L12,0 L19,6.5 L19,14.6 C19,16.4777681 17.4777681,18 15.6,18 L6.4,18 C4.52223185,18 3,16.4777681 3,14.6 L3,3.4 C3,1.52223185 4.52223185,7.89029623e-16 6.4,0 Z"
              id="Rectangle" fill="#85EBBC"></path>
            <path d="M12,0 L12,5.5 C12,6.05228475 12.4477153,6.5 13,6.5 L19,6.5 L19,6.5 L12,0 Z" id="Path-2"
              fill="#64B18D"></path>
          </g>
        </g>
      </g>
    </svg>
  </div>


</body>

</html>

THE END