style.css

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 24px;
  line-height: 1.3;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  letter-spacing: 0.7px;
  background-color: #f6f7fb;
  overflow-x: hidden;
}

.center {
  position: absolute;
  top: 0%;
  left: 0px;
  padding: 37px;
}
.colors {
  display: inline-flex;
  float: left;
  margin: 11px;
  margin-bottom: 40px;
}
.colors .color {
  position: relative;
  width: 93px;
  height: 190px;
  text-transform: uppercase;
}
.colors .color:first-child {
  border-radius: 10px 0 0 10px;
}
.colors .color:last-child {
  border-radius: 0 10px 10px 0;
}
.colors .color span {
  position: absolute;
  bottom: -30px;
  width: 100%;
  font-size: 0.625em;
  text-align: center;
}

.copy-btn {
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.copy-btn {
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 45%;
}

.color:hover .copy-btn {
  background-image: url("data:image/svg+xml,%3Csvg height='18' viewBox='-40 0 512 512' width='18' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='copyicon' d='m271 512h-191c-44.113281 0-80-35.886719-80-80v-271c0-44.113281 35.886719-80 80-80h191c44.113281 0 80 35.886719 80 80v271c0 44.113281-35.886719 80-80 80zm-191-391c-22.054688 0-40 17.945312-40 40v271c0 22.054688 17.945312 40 40 40h191c22.054688 0 40-17.945312 40-40v-271c0-22.054688-17.945312-40-40-40zm351 261v-302c0-44.113281-35.886719-80-80-80h-222c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20h222c22.054688 0 40 17.945312 40 40v302c0 11.046875 8.953125 20 20 20s20-8.953125 20-20zm0 0'/%3E%3C/svg%3E");
}
.copy-btn:active {
  transform: scale(0.3);
}