CODEWITHSUNDEEP
cssbutton
aarav
aarav

Reputation: 31

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

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!

Upvotes: 3

Views: 14995

Answers (6)

Sahil Popli
Sahil Popli

Reputation: 1995

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.

Upvotes: 1

lukeocom
lukeocom

Reputation: 3243

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>

Upvotes: 2

Benjamin R.
Benjamin R.

Reputation: 333

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 ";
}

Upvotes: 3

Hassaan
Hassaan

Reputation: 326

Use the precious CSS code;

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

I use the text visibility hidden, on hover visibility visible. Simply the best.

Upvotes: 0

Ady Ngom
Ady Ngom

Reputation: 1302

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

Upvotes: 0

TDsouza
TDsouza

Reputation: 938

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;

}

Upvotes: 0

Related Questions