HTML

CSS

JS

#checkbox-bookmark {
  display: none;
}

.bookmark {
  cursor: pointer;
  background-color: teal;
  width: 45px;
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
}

.svgIcon path {
  stroke-dasharray: 200 0;
  stroke-dashoffset: 0;
  stroke: white;
  fill: #dddddd00;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

#checkbox-bookmark:checked ~ .svgIcon path {
  fill: white;
  -webkit-animation: bookmark 0.5s linear;
  animation: bookmark 0.5s linear;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

@-webkit-keyframes bookmark {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dasharray: 200 0;
  }
}

@keyframes bookmark {
  0% {
    stroke-dasharray: 0 200;
    stroke-dashoffset: 80;
  }
  100% {
    stroke-dasharray: 200 0;
  }
}

Bookmark Icon Built With Checkbox

Bookmark icon built with a checkbox. This bookmark UI component has an SVG animation when clicked. This gives an easy visual indication of whether the checkbox is checked or not.

Just like pretty much all of our UI elements, you can easily change the color of the bookmark icon by changing the background-color on CSS line 7.