How to transition like button status (Like -> Liked)

Question

I used the following code from this article here

I'm currently looking for how to transition the like text (Like -> Liked) after somebody liked my post. My blog: https://14test.tumblr.com

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;
}

HTML

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

Hey! I have an answer for this, but it would be nice if you voted on my previous post which clearly helped you, as I can see you are quoting the new code here! TIA — lharby, Aug 15 '23 at 08:00

lharby · Answer 1 · 2023-08-15T08:50:22.437

1

You can achieve this relatively easily using the pseudo before or after css selector.

I would do this:

.like_button + .our_button:after {
   content: "LIKE"
}

.like_button.liked + .our_button:after {
  content: "LIKED"
}

You can add anything into the content field, but this will append the content into the our_button wrapper, so you might want to remove the heart and not have any existing HTML content inside the container. IE just use pseudo after css to control the text.

<span class="our_button"></span>

HTH

edited Aug 15 '23 at 08:50

answered Aug 15 '23 at 08:43

lharby

3,057
5
24
56

1

Thank you so so much! Also thank you for reputation boost! I can now voted for you :) – dn dn dn Aug 15 '23 at 08:50
No problem! Thank you! – lharby Aug 15 '23 at 08:52
Don't forget to consider screen reader users- they may not get to hear this text (which may or may not be important in your particular context of course). – A Haworth Aug 15 '23 at 16:00
@AHaworth good point, in that case this would require a JS solution, which also has it's drawbacks. – lharby Aug 15 '23 at 16:58

How to transition like button status (Like -> Liked)

1 Answers1