Changing button text on hover

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.

What I want to happen is when I hover on it it will turn to green and change the text to Completed!.

Currently the button changes color when I hover on it but the text wont change.

Here's my css:

.button {
     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 {
     border: 0px solid #1292e1;
     background: green;
     color: white !important;
     content: "Completed!" !important;
    }
   
   .button:active {
     background: #1292e1;
     color: white;
     text-decoration: none !important; 
    }

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

And here's the html for the button:

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

Sharice

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>

Smriti

Doing this right now, Is there a way for the size of the button to not change when I hover on it? – Sharice

Set a width and it will remain the same :) – Smriti

Answer 2

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>

Wondering

I like this solution since it provides both the CSS and JS solution – Scholium

Answer 3

@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>

Cologarithm

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>

Erigeron

Answer 5

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.

e.g.

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

Pyroelectricity

Answer 6

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?

Ox

Is there any way to do it using css? – Sharice

Sure, you could use JS, but you can do it with just css. – Smriti