Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing button text on hover

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>

like image 415
K. Rogers Avatar asked Mar 04 '23 17:03

K. Rogers


2 Answers

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>
like image 186
rpm192 Avatar answered Mar 12 '23 02:03

rpm192


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>
like image 26
AndrewL64 Avatar answered Mar 12 '23 02:03

AndrewL64