How do I make text in a CSS button appear only on hover? [duplicate]

Question

I made some CSS div buttons on an example website which are used in a sidebar navigation menu. I was just wondering how one would go about making it so that text appears only when the mouse is hovered over the button.

If there was a way to include the text (ex: "Click Here!") in the CSS under the hover part for the div only, that would work, but I don't think you can do that. If I include it in the HTML, then it shows up regardless of hover or not.

The example website is here: http://www.arthiaravind.com/nursery/

Ideally, the buttons would be blank, and then when they're hovered over, they would extend and the link would appear.

Here is the code for the first button:

.button1 {
    position: fixed;
    margin-top: 100px;
    margin-left: 730px;
    width:70px;
    height:50px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

Here is the code for when you hover:

.button1:hover{ 
    width:200px;
}

Any suggestions for making my code more streamlined would also be appreciated, as I currently have this code copypasted for each of the five buttons, which I know is clunky but I don't know how to make them all the same type of button but then position them individually.

I also don't know why the buttons extend when you load the page. That isn't supposed to happen.

Thank you!

Text-indent doesn't remove the text completely though. I just don't want it to appear at all until the button is hovered over. — aarav
– aarav, Commented Mar 14, 2013 at 3:55
Sounds like a terrible idea, as the users would be forced to hover over the buttons to know what they are, and may not even realize that they are buttons at all. The buttons are extending because you are applying a css transition to it. — Jeemusu
– Jeemusu, Commented Mar 14, 2013 at 4:11
@aarav - no text solution: jsfiddle.net/7MyxY You should know that not having text at all in your links is terrible for SEO and usability. — slamborne
– slamborne, Commented Mar 14, 2013 at 4:22
Well, this isn't a real website for anyone to use so I don't care about usability or SEO. I'm just playing around and was trying to figure out how to do this specific thing. — aarav
– aarav, Commented Mar 14, 2013 at 5:08

Ganesh Kathiresan · Accepted Answer · 2016-09-05 18:11:04Z

3

To make text in a CSS button appear only on hover, you can use the CSS content property (you will have to look up cross browser support for this), use JavaScript, or change the color of the text on hover as others have suggested. Here is a JS fiddle that addresses the first two solutions:

http://jsfiddle.net/ABHgN/1/

/*<div id="button1"></div>*/

#button1{
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: green;
}

#button1:hover:before{
    content: "viaCSS ";
}

edited Sep 5, 2016 at 18:11

Ganesh Kathiresan

2,1082 gold badges26 silver badges35 bronze badges

answered Mar 14, 2013 at 4:16

Benjamin R.

3332 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ganesh Kathiresan · Accepted Answer · 2016-09-06 14:40:38Z

2

A possible solution is simply to set the font color to the background colour, and then change it on hover. This fiddle demonstrates it: http://jsfiddle.net/LXxG3/

In your css add a font color

.button1{
    background:#75AD38;
    color:#75AD38;
}

and a hover color

.button1 hover{
    color:#fff;
}

As for streamlining your css, simply apply the style to the base tag, ie button, and then individual styles by class name. for example to set individual background colours for two buttons... EDIT: changed button to .baseButton so it can be used as a base class for your button divs

/*style for all button tags */
.baseButton{
    width:70px;
    height:50px;
    margin-top: 100px;
    margin-left: 30px;
    text-align:right;
    padding: 0px 50px 0px 0px;
    background:#75AD38;color:#75AD38;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

/*individual styles */
.button1{
    background-color:#afa;
    color:#afa;
}
.button2{
    background-color:#faa;
    color:#faa;
}

This would be used in the html as such:

<div class="baseButton button1">Your button</div>

An alternative is to use id's for individual buttons..

css

 /*individual styles */
#button1{background-color:#afa;color:#afa;}
#button2{background-color:#faa;color:#faa;}

html

<div class="baseButton" id="button1">Your button</div>

edited Sep 6, 2016 at 14:40

Ganesh Kathiresan

2,1082 gold badges26 silver badges35 bronze badges

answered Mar 14, 2013 at 3:59

lukeocom

3,2533 gold badges21 silver badges30 bronze badges

3 Comments

aarav Over a year ago

Thank you! I tried using your method for streamlining but I must be doing something wrong in the HTML part: should I use <div class= "button1"> ? When I use that, all of the attributes from the button section in the style sheet don't work and the buttons are misplaced.

lukeocom Over a year ago

if you are using divs, then you would need to apply the base style to div not button. ie div{base styles here;}. However that affects all of your divs including those you dont use as buttons. so instead, you can use two classes for your button divs, one would be the base style .baseButton as defined in my edited answer above. <div class="baseButton button1">first button</div><div class="baseButton button2">second button</div>

lukeocom Over a year ago

I updated my answer to show how you can use id selectors as well,.

Community · Accepted Answer · 2020-06-20 09:12:55Z

You can change color of text on hover

and put it same on normal state by that it is not visible

 .button1 {
     position: fixed;
     margin-top: 100px;
     margin-left: 730px;
     width:70px;
     height:50px;
     text-align:right;
     padding: 0px 50px 0px 0px;
     background:#75AD38;
     color:#75AD38;   // same color as background
     transition:width 2s;
     -moz-transition:width 2s; /* Firefox 4 */
     -webkit-transition:width 2s; /* Safari and Chrome */
     -o-transition:width 2s; /* Opera */
}


.button1:hover {
    color:#fff ||#000 //like any suitable color 
}

but it is not the right way

you can also use text-indent

or I think content:"text"; on hover like we use in :before and :after also work but I am not sure.

Note:

It is not good in terms of usability too as the users get irritated when they have to hover every button to see what the button does.

TDsouza · Accepted Answer · 2013-03-14 04:42:56Z

0

I'd personally recommend you don't do this, as it would affect used experience. People may find it annoying to hover over each and every button when searching for content.

However if you still want to go ahead here's a working fiddle

Basically style your text like this

.button1 p {
display:none;

}

and then make it visible on hover like this

.button1:hover p {
    display:inline;

}

answered Mar 14, 2013 at 4:42

TDsouza

9382 gold badges13 silver badges39 bronze badges

Comments

Ady Ngom · Accepted Answer · 2013-03-14 05:49:51Z

0

Here is a quick example of how the text will only show on hover using css child combinator

 <div>
  <p>text</p>
 </div>

/** CSS **/
* {
 margin: 0;
 padding: 0;
}

div {
 width: 60px;
 height: 40px;
 background-color: green;
 border: 1px solid #000;
}

p {
 text-align: center;
 color: #fff;
 vertical-align: middle;
 display: none;
 line-height: 40px;
}

div:hover > p {
 display: block;
}

jsfiddle

answered Mar 14, 2013 at 5:49

Ady Ngom

1,3122 gold badges10 silver badges12 bronze badges

Comments

2 revs, 2 users 70% · Accepted Answer · 2025-03-11 15:32:59Z

-1

Use this CSS code;

http://jsfiddle.net/hassaan39/NheFj/

I use visibility: hidden, and on hover visibility: visible.

edited Mar 11 at 15:32

community wiki

2 revs, 2 users 70%
Hassaan

Collectives™ on Stack Overflow

How do I make text in a CSS button appear only on hover? [duplicate]

6 Answers 6

Comments

3 Comments

Note:

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Note:

Comments

Comments

Comments

Comments

Linked

Related