?
Solved

CSS rollover buttons

Posted on 2010-09-13
2
Medium Priority
?
678 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 2000 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

Quick Cloud Training

Looking for some quick training on the cloud in 2 hours or less? Check out these how-to guides in AWS, Linux, OpenStack, Azure, and more!

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
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…
Suggested Courses

771 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