Solved

CSS rollover buttons

Posted on 2010-09-13
2
676 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

724 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