"在悬停时更改按钮文本"

Question

I'm trying to change the text of the button when you hover on it, I found a solution but for some reason it won't work.

Answer 1

You could do this using a psuedo element.

 .button { width: 150px; /* set a width so it doesnt change upon hover */ border: 0px solid #004B84; background: red; padding: 3px 21px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; color: #ffffff; font-size: 12px; font-family: Questrial; text-decoration: none; vertical-align: middle; letter-spacing: 2px; } .button:hover span { display:none } .button:hover:before { content:"Completed!"; } .button:hover { background-color: green; } 

 <button class="button"> <span>New request</span> </button> 

Answer 2

@K. Rogers Try Code Hope This Will Work For You!

  /* .button */ .button { display: inline-block; position: relative; border: 0px solid #004B84; background: red; padding: 8px 25px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; color: #ffffff; font-size: 12px; font-family: Questrial; text-decoration: none; vertical-align: middle; letter-spacing: 2px; overflow: hidden; } .button:hover { background: green; } .button span { transition: 0.6s; transition-delay: 0.2s; } .button:before, .button:after { content: ''; position: absolute; top: 0.67em; left: 0; width: 100%; text-align: center; opacity: 0; transition: .4s,opacity .6s; } /* :before */ .button:before { content: attr(data-hover); transform: translate(-150%,0); } /* :after */ .button:after { content: attr(data-active); transform: translate(150%,0); } /* Span on :hover and :active */ .button:hover span, .button:active span { opacity: 0; transform: scale(0.3); } /* :before pseudo-element on :hover and :after pseudo-element on :active */ .button:hover:before, .button:active:after { opacity: 1; transform: translate(0,0); transition-delay: .4s; } .button:active:before { transform: translate(-150%,0); transition-delay: 0s; } 

  <button class="button" type="button" data-hover="COMPLETED" data-active="I'M ACTIVE"><span>New Request </span></button> 

Answer 3

CSS (without HTML):

You don't need to touch your HTML (manually adding <span> tags, manually removing HTML element content, etc) for this.

Just set the button's text content font-size to 0px then add your own text and font-size to the button using :hover , ::after and ::after:hover .

---

Check and run the following Code Snippet for a practical example of using just CSS to edit your button's content:

 .button {font-size: 0px;min-width: 100px;min-height: 22px;} .button::after {font-size: 14px;} .button::after { content: "New Request"; } .button:hover::after { content: "Completed!"; } .button:hover { background-color: green; border: 0px solid #1292e1; color: white !important; } 

 <button class="button" type="submit" name="completed" value="">New Request</button> 

JavaScript:

Just use the textContent() property to change your text on hover ( mouseover ) to Completed and back to New Request when hovered out ( mouseout ).

Check and run the following Code Snippet for a practical example of the JavaScript approach above:

 var btn = document.querySelector(".button"); btn.addEventListener("mouseover", function() { this.textContent = "Completed!"; }) btn.addEventListener("mouseout", function() { this.textContent = "New Request"; }) 

 .button { min-width: 100px; min-height: 22px; } .button:hover { background-color: green; border: 0px solid #1292e1; color: white !important; } 

 <button class="button" type="submit" name="completed" value="">New Request</button> 

Answer 4

Here is one more solution wit no change button html-code. Just using css style of pseudo-element ::after To prevent a change of button width on hover you need to define width property.

 .button { border: 0px solid #004B84; min-width: 150px; background: red; padding: 5px 21px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; color: #ffffff; font-size: 12px; font-family: Questrial; text-decoration: none; vertical-align: middle; letter-spacing: 2px; } .button:hover { background: green; } .button::after { content: "New request!"; } .button:hover::after { content: "Completed!"; } .button:active { background: #1292e1; } .button:active::after { background: #1292e1; } 

 <button class="button" type="submit" name="completed" value=""></button> 

Answer 5

I'm using this in combination with a button size increase. Do I have any option to delay the text display until the button is big enough to fit it? I'd like to avoid that ugly effect when the text doesn't fit.

 #emailButton{ background-color: grey; color: black; height: 48px; width: 48px; border: none; border-radius: 48px; transition: all 0.5s linear; } #emailButton:hover{ background-color: blue; border: none; color: white; width: 225px; height: 67px; border-radius: 67px; } #emailButton:hover::before{ content: "Some text here" }

 <button class="align-items-center" id="emailButton"> <svg id="emailIcon" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 14C0 15.1 0.9 16 2 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H2V4L10 9L18 4V14ZM10 7L2 2H18L10 7Z" fill="currentcolor"/> </svg> </button>

Thank you very much! Miguel Gisbert

Answer 6

See:

https://www.w3schools.com/cssref/pr_gen_content.asp

The content property is used with the ::before and ::after pseudo-elements, to insert generated content.

You will need Javascript or more.

eg

<button class="button" type="submit" name="completed" value="" onmouseover="document.getElementsByName('completed')[0].innerHTML ='Completed!';" onmouseleave="document.getElementsByName('completed')[0].innerHTML ='New Request';">New Request</button>

Answer 7

If you want to change the value of an element on a page, then you need to do it per code - try to do it with JavaScript

Edit: Seems like there is a way:

How can I replace text with CSS?