Changing button's text on hover

I have a button that says ‘‘Talk to a rep’’ and I want it to change to a phone number on hover. I do not want to use images for this, straight up text. How can I do this in webflow?

<script>
  $(document).ready(function() {
    $('.button-you-talk-about').hover(function() {
      $(this).html('Phone number in here');
    }, function() {
      $(this).html('Talk to a rep');
    });
  });
</script>

You’re welcome :wink:

3 Likes

If you don’t want to use code… You can trick it with css, a link block (first text + call link) and block overlay with phone number text (opacity 0% by default, 100% on hover).

Doesn’t work on mobile of course, but you can still press button to call.

https://webflow.com/design/rowan-test?preview=c97b8b18cd7902d2045def8fae4b7d45

4 Likes

Thanks @bartekkustra and @rowan!

@bartekkustra & @rowan:

Hi!
I really like that you have a solution to this problem, I have the same problem!
I’m trying to understand your solutions, but I cant seem to make it work!

@bartekkustra: I’m really not good at code, if you have time, I would love it if you could explain what parts I’m supposed to change to link it correctly. And if I should post in the < head > part or the < body > part?
Sorry if it’s a stupid questions!

@rowan: I don’t understand how you insert a link block with a block overlay, where is that function?

Would be really great if you have time to write me a reply!
Kind regards,
Amanda

I’ll make a video once I get home okay? I’m at work now.

You are great! Thank you so much, would help me a lot!

@bartekkustra

I modified your Javascript code from hover to change on click. But when i click the button I can’t get it to go back to the initial text state. The button starts with “show map”. When you click it, the text changes to “hide map”. But once you click it again I want it to go back to “show map” again. How do I do that? My code looks like this at the moment:

<script>
  $(document).ready(function() {
    $('.togglemapbutton').on("click", function() {
      $(this).html('Show map');
    }, function() {
      $(this).html('Hide map');
    });
  });
</script>

That’s because you can’t have two functions on click for map. I’d suggest following:

<script>
$(document).ready(function() {
  var mapState = true;

  $('.togglemapbutton').click(function(e) {
    e.preventDefault();

    if(mapState) {
      $(this).html('Show map');
      mapState = false;
    } else {
      $(this).html('Hide map');
      mapState = true;
    }
  });
});
</script> 

This should do the trick :)

1 Like

Sweet stuff Bartosz! :slight_smile: Thanks a lot!

1 Like

That Link is bad and now I am typing to reach 20

Sorry to bump this. I can’t get a button’s text to change on click. I copied this code exactly and named my classes to match.

When I publish my site, nothing happens with the button. The code is in the head tag for the page. Advice would be much appreciated. Thanks a lot :slight_smile:

Hi @Niall_Mc_Dermott, Place scripts on the body tag and it should sort it out. CSS styles go in the header. Scripts typically go right before the closing body tag.

You back from work yet waiting for that video lol

I’m not that great on coding a video would be greate thanks

Hello @Adam_Wright

I created something like the original post was requested, check this out:

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

Go to Changing Button page and see all the structure there, let me know if that helps

NOTE: You can even touch the button on mobile devices and trigger a phone call :wink:

Cheers,

Reusable and easier to maintain script here

Change An Element's Text On Hover (without interactions)