Comments on: CSS Rollover Button http://www.davidjrush.com/blog/2009/01/css-rollover-button/ David J. Rush is a web designer and usability consultant in Pittsburgh who freelances and blogs about anything web related. Tue, 17 Jan 2012 19:58:06 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Audrey http://www.davidjrush.com/blog/2009/01/css-rollover-button/#comment-32552 Audrey Thu, 18 Aug 2011 21:11:19 +0000 http://www.davidjrush.com/blog/?p=14#comment-32552 Thank you kindly for the tutorial; I'm using this for rollover buttons on our music department pages, and it works like a charm! Thank you kindly for the tutorial; I’m using this for rollover buttons on our music department pages, and it works like a charm!

]]> By: David http://www.davidjrush.com/blog/2009/01/css-rollover-button/#comment-16553 David Mon, 03 Jan 2011 23:08:25 +0000 http://www.davidjrush.com/blog/?p=14#comment-16553 Good question Joe. This code is optimally used for very customized image buttons that have text that search engines can crawl. Because of how the CSS is applied, and how the text is written in the source code, the user sees a beautiful button, but the search engine crawls a text link. Now, if I understand what you are thinking of using, you'd lose some of the customization that you can have with these image rollovers, though you'd keep the link crawlable. I say base your decision off of how customized you wish your button to be. Also, just in case, remember that IE6 and some other browsers out there do not recognize the pseudo-class of :hover on anything but links... Good question Joe. This code is optimally used for very customized image buttons that have text that search engines can crawl. Because of how the CSS is applied, and how the text is written in the source code, the user sees a beautiful button, but the search engine crawls a text link. Now, if I understand what you are thinking of using, you’d lose some of the customization that you can have with these image rollovers, though you’d keep the link crawlable. I say base your decision off of how customized you wish your button to be. Also, just in case, remember that IE6 and some other browsers out there do not recognize the pseudo-class of :hover on anything but links…

]]> By: Joe http://www.davidjrush.com/blog/2009/01/css-rollover-button/#comment-16524 Joe Mon, 03 Jan 2011 16:23:13 +0000 http://www.davidjrush.com/blog/?p=14#comment-16524 I'm building a blog for someone and I made a tableless css layout that mostly uses floats... this was exported out of CS5 Fireworks program. I'm now creating my navigation buttons for my "social icons". I'm debating if I should make the rollovers in CSS like your coding shows or simply put Dreamweaver rollover bottoms inside my div tag and float them left in my div container. Any reason why I shouldn't use old school html rollover code inside the div tag? I’m building a blog for someone and I made a tableless css layout that mostly uses floats… this was exported out of CS5 Fireworks program. I’m now creating my navigation buttons for my “social icons”. I’m debating if I should make the rollovers in CSS like your coding shows or simply put Dreamweaver rollover bottoms inside my div tag and float them left in my div container. Any reason why I shouldn’t use old school html rollover code inside the div tag?

]]> By: David http://www.davidjrush.com/blog/2009/01/css-rollover-button/#comment-15834 David Fri, 24 Dec 2010 20:29:24 +0000 http://www.davidjrush.com/blog/?p=14#comment-15834 Sure Darryl. Different IDs shouldn't be a problem seeing as this CSS is built with that in mind. Here's what your code would probably look like: <div class="rollover" id="link1"><a href="#">link 1</a></div> <div class="rollover" id="link2"><a href="#">link 2</a></div> <div class="rollover" id="link3"><a href="#">link 3</a></div> Just check to make sure that your HTML and CSS mirrors what you see above, and if you encounter more problems, share your code so I can parse it out. Sure Darryl. Different IDs shouldn’t be a problem seeing as this CSS is built with that in mind. Here’s what your code would probably look like:

<div class=”rollover” id=”link1″><a href=”#”>link 1</a></div>
<div class=”rollover” id=”link2″><a href=”#”>link 2</a></div>
<div class=”rollover” id=”link3″><a href=”#”>link 3</a></div>

Just check to make sure that your HTML and CSS mirrors what you see above, and if you encounter more problems, share your code so I can parse it out.

]]> By: Darryl http://www.davidjrush.com/blog/2009/01/css-rollover-button/#comment-15768 Darryl Thu, 23 Dec 2010 20:49:38 +0000 http://www.davidjrush.com/blog/?p=14#comment-15768 I am trying to use the tutorial you did to do 3 links side by side by second link is not responding to the rollover. Am I able to use the same div name with different ids to accomplish this? The first link work but the second doesn't. Can you help me. I am trying to use the tutorial you did to do 3 links side by side by second link is not responding to the rollover. Am I able to use the same div name with different ids to accomplish this? The first link work but the second doesn’t. Can you help me.

]]>