I am having a problem with creating a button that has 2 colors with 3 states with a structure as follows:
| bgcolor1 (white-text) | bgcolor2 (white-arrow) | normal state
| bgcolor2 (white-text) | bgcolor2 (white-arrow) | hover state
| bgcolor3 (white-text) | bgcolor4 (white-arrow) | active state
my approach was to use the main color as bg color, and make the arrow with the seperate background color a background image. The problem I had there was with the third state of the arrow, which had a different background color.
could this be achieved with pure css?
can use a single code snippet for buttons with both single line and multiple line text?
I have come across this before and basically the way i overcame it was by using an <a> element with a <span> element as the child with a display of block and styled the <span> as the arrow, the advantage to this is the :hover and :active states already exist so there is no issues with browser support and it’s very easy to update and change if you no longer require an arrow. Of course the same story won’t apply to <input> elements but if you go with a <button> element which i dislike over <input> elements you can add a <span> as the child and still have access to the :hover and :active states.
I assume you aren’t specifically talking about the button element and in that case why can’t you just change the background colours and images as required for hover and active?
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.menu {
margin:0;
padding:0;
list-style:none;
width:200px;
}
.menu li, .menu a {
width:200px;
color:fff;
display:block
}
.menu li { margin:0 0 1px }
.menu a:visited { color:#fff; }
.menu a {
padding:5px 25px 5px 10px;
text-decoration:none;
background:red url(images/arrowsprite.gif) no-repeat 100% 0;
}
.menu a:hover {
background-color:green;
background-position:0 -25px;/* move position of sprite to show hovered arrow state*/
}
.menu a:active, .menu a:focus {
background-color:blue;
background-position:0 -75px;/* move position of sprite to show active arrow state*/
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#"> Link 1</a></li>
<li><a href="#"> Link 1</a></li>
<li><a href="#"> Link 1</a></li>
</ul>
</body>
</html>
Just make an arrow sprite with the three different arrows on them and swap the position to reveal the new image as shown.
Or did you mean something more complicated than that and I misunderstood the question?
what I feared was that the rule we use for placing the arrow sprite in the anchor, would be overwritten with the background-position rules applied to reveal the other states of the arrow. This actually works, just saw your second post Thank you!
