Custom like button liked state didn't work

Question

I used the following code from this article here

Despite looking right and usable on my blog, it didn't show the liked state as described in the article.

My blog: https://14test.tumblr.com

Here is the code: HTML

<center><div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
  <div class="like_button">
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div></center>

CSS

        .custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.like_button:hover + .our_button {
  color: red;
}
.like_button.liked + .our_button {
  background: white;
  color: red;
}

Answer 1

You need to change this:

<center><div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
  <div class="like_button">
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div></center>

To this:

<center>
   <div class="custom-like-button">
   {LikeButton}
       <span class="our_button">
          &hearts;
       </span>
   </div>
</center>

The issue is that your css for your current selector is trying to use the Adjacent Sibling Combinator but this will not work because your markup is nested inside another element.

Additionally you have a <div class="like_button"></div> block in your markup, but the same selector/classname is generated by Tumblr inside the {LikeButton} and I think that is causing an issue binding to the click event.

I tested it in the browser and got it to work, but you will need to update this to make sure it works for you.