Solved

CSS rollover buttons

Posted on 2010-09-13
2
668 Views
Last Modified: 2013-12-25
I am trying to make a rollover menu that swaps different backgrounds and changes the color of the text.

My first approach has the button looking the way I want it to with the correct image and text centered, but does not work for the rollover.

input.button      {
      background-image:url('images/stonelblu.png');
      background-position:center;
      background-repeat:no-repeat;
      border:none;
      width:150px;
      height:42px;
      color:white;
      font-family:"Baskerville Old Face";
      font-size:20px;
      
}

input.button:hover      {
      background-image:url('images/stoneblk.png');
      color:olive;
}


My second approach has the rollover working, but I cannot get the text to align vertically.  It wants to have the text nested at the top of the button.

p.navbuttons a {
      background-image:url('images/stonelblu.png');
      background-position:center;
      border:none;
      width:150px;
      height:42px;
      color:white;
      font-family:"Baskerville Old Face";      vertical-align:middle;
      text-align:center;
      font-size:20px;
}

p.navbuttons a:hover, p.navbuttons a:active {
      background-image:url('images/stoneblk.png');
      background-position:center;
      border:none;
      width:150px;
      height:42px;
      color:olive;
      font-family:"Baskerville Old Face";
      text-align:center;
}

I have tried the "vertical-align" and a couple others but it doesn't seem to really do any good.  I have tried to give it a negative value to make it go below where it puts it, but it doesn't move.  However if I put a positive number it will raise it to the point it is off or partially off the button.
0
Comment
Question by:Pangeia
2 Comments
 
LVL 4

Expert Comment

by:acashok
ID: 33668917
0
 
LVL 2

Accepted Solution

by:
Adesso21 earned 500 total points
ID: 34083285
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
      BODY {
            background-color : #FFFFFF;
      }
      #roll-over-image {
            background-image : url('images/blackred.gif');
            background-repeat : no-repeat;
            background-position : 0px 0px;
            color : #FFFFFF;
            text-align : center;
            vertical-align : middle;
            width : 100px;
            height : 100px;
            line-height : 100px;
      }
      #roll-over-image:HOVER {
            background-position : 0px -100px;
      }
</style>
</head>
<body>
      <div id="roll-over-image">
            Button
      </div>
</body>
</html>

Important was to make the line-height the same as the box, so that the text can be aligned vertical
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to dynamically set the form action using jQuery.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question