Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 694
  • Last Modified:

CSS rollover buttons

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
Pangeia
Asked:
Pangeia
1 Solution
 
Adesso21Commented:
<!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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now