SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS buttons with 2 background colors

    I am having a problem with creating a button that has 2 colors with 3 states with a structure as follows:

    buttons_3state_2bg.png

    | 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?

    thank you for your time on helping!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how can I change two backgrounds at the same time for the last state? from the hover state bgcolor 2 / bgcolor 2 to bgcolor 3/ bgcolor 4

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi welcome to Sitepoint

    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.
    Code:
    <!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?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Not the most elegant demo it could be but it's just an example http://jsfiddle.net/GA8bX/

  6. #6
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thank you for your help,

    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •