August 24, 201214 yr I see lots of hover buttons etc. that are 2 images on top of each other like the image that I have attached. How can you create a button like that? Whats the trick to line the image? And what does is used?
August 24, 201214 yr What do you mean ? Do you mean an image that slides towards the button your mouse is hovering over ? If thats the case you will need jQuery
August 24, 201214 yr it's a sprite. You set the background position to show one half for normal button, then move the background position up/down to show the other half on hover. See here, ~evu.
August 24, 201214 yr Author it's a sprite. You set the background position to show one half for normal button, then move the background position up/down to show the other half on hover. See here, ~evu. Thank you evu,
August 24, 201214 yr Author I've had a go at it but it didn't work. Here is the code and the image. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Button</title> <style type="text/css"> * { margin: 0; padding: 0; /* Quick and Dirty Reset */ } #demo { width: 152px; margin: 100px auto; } #demo p a.press-it-btn { display: block; width: 152px; height: 32px; background-image: url(moreinfo.png); background-position: top; text-indent: -9999px; } #demo p a.press-it-btn:hover { background-position: center; } a { outline: none; } #demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus </style> </head> <body> <div id="demo"> <p><a href="#" class="press-it-btn">Press it</a></p> </div> </body> </html> Edited August 24, 201214 yr by Vulcan
August 25, 201214 yr Change #demo p a.press-it-btn { display: block; width: 152px; height: 32px; background-image: url(moreinfo.png); background-position: top; text-indent: -9999px; } #demo p a.press-it-btn:hover { background-position: center; } to #demo p a.press-it-btn { display: block; width: 152px; height: 32px; background: url(moreinfo.png); 0 0 no-repeat; text-indent: -9999px; } #demo p a.press-it-btn:hover { background-position: 0 32px; }
Create an account or sign in to comment