Simple CSS Rollovers »
8 I've received a few inquiries lately asking about rollover buttons, so I thought I would write out some CSS rollover button options. Samples include the Blog button used on this website.
Example 1: The "Blog" button on this website
(top left of the screen).
First I create the regular image and the image I want used for rollover:
Then I add the button to my page somewhere. Since I knew I was going to position this button fixed to the top left of the screen (learn more about fixed positioning) I went ahead and placed the html for the button in my website footer, I could have placed it anywhere. Here is the html for my button:
<div id="blogBtn">
<a href="/blog/"><img src="/storage/blogBtn.png"></a>
</div>
This html creates a <div> named #blogBtn. Inside #blogBtn is a link containing my normal state image and the url I want it to link to.
Next we position and style the button with CSS:
#blogBtn { display: block; position: fixed; top: 112px; left: 0px; width: 100px; height: 100px; background: url(/storage/blogBtnRollover.png) no-repeat; }
#blogBtn a { display: block; }
#blogBtn img { width: 100px; height: 100px; }
* html a:hover { visibility: visible; }
#blogBtn a:hover img { visibility: hidden; }
This tells #blogBtn to be fixed to the top left, be 100px wide and 100px tall, and to use the rollover image I created as it's background. Then it tells the #blogBtn link (a) that when it is rolled over, to hide the normal state image, revealing the background image underneath.
Example 2: The "Friend of Squarespace" button on this website
(bottom right of the screen).
First I create the regular image and the image I want used for rollover:
Then I add the button to my page somewhere. Since I knew I was going to position this button fixed to the bottom right of the screen I went ahead and placed the code for the button in my site footer along with the first button, I could have placed it anywhere. Here is the html for my button:
<div id="sqBtn">
<a href="http://www.squarespace.com"><img src="/storage/SQ_friendBtn.png"><span>A Friend of Squarespace</span></a>
</div>
The html (and the css) for this button is slighly different than for the blog button in the first example because I am not placing the button text in the image itself, instead I'm using real text which can be beneficial for SEO purposes. So this html creates a <div> named #sqBtn. Inside #sqBtn is a link containing my normal state image, the url I want it to link to, and the text I want.
Next we position and style the button with CSS:
#sqBtn { display: block; position: fixed; bottom: 10px; right: 10px; width: 160px; height: 35px; background: url(/storage/SQ_friendBtn_Rollover.png) no-repeat; }
#sqBtn a { display: block; width: 160px; height: 35px; float: left; font-size: 10.5px; color: #000000 !important; }
#sqBtn img { width: 160px; height: 35px; }
#sqBtn span { position: absolute; left: 33px; top: 9px; cursor: pointer; }
#sqBtn a:hover { color: #ffffff !important; }
* html a:hover { visibility: visible; }
#sqBtn a:hover img { visibility: hidden; }
This tells #sqBtn to be fixed to the bottom right, be 160px wide and 35px tall, and to use the rollover image I created as it's background. It also sets positioning and width for the image in the button, and the text in the button.
Then it tells the #sqBtn link (a) that when it is rolled over to change the text color and to hide the normal state image, revealing the background image underneath.
Example 3: A Different Method.
Instead of using one image for the normal state placed on the page, and another image as the background image to be revealed on rollover, you could instead have both button states in a single image and use it as the background image (then move the background image on rollover with css). Here is my image, notice that this one includes both button states in one image:
Then I add the button html to my page somewhere:
<a id="sqBtn" href="http://www.squarespace.com"><span>A Friend of Squarespace</span></a>
Next we style the button with CSS:
#sqBtn { display: block; width: 160px; height: 35px; background: url(/storage/SQ_friendBtnFull.png) no-repeat 0 0; font-size: 10.5px; color: #000000; }
#sqBtn span { position: relative; left: 33px; top: 9px; }
#sqBtn:hover { background-position: 0 -35px; color: #ffffff !important; }
Example 3: Turn Existing Elements Into Rollovers
You can take pretty much any element in your Squarespace template and turn it into a rollover with some simple CSS. For example:
The Journal Titles on the front page of this blog:
.journal-entry .title a { background: #333333; color: #ffffff; }
.journal-entry .title a:hover { background: #ffff66; color: #333333; }
Reader Comments (8)
Dana,
All I can say is a big WOW! Thank you so much for sharing your expert tips. I'm fiddling with them on my site, please feel free to checkout the final version in a few days.
Cheers,
Dev
Anytime! You're site is coming along nicely! I look forward to seeing the final results!
Dana,
Like always, this is great help. I'm trying to work with a resize of my original and hover image. Could you please share the css for displaying these images as percentages? I've tried to enter them in the code but it hasn't been working...
Thanks for your response in advance,
-Dev
Let me know what images you are trying to target specifically (images in a journal entry, gallery images, gallery thumbnail images, etc they all have different names that would be used. Otherwise, you could try something like this:
img { width: 90% !important; }
img:hover { width: 100% !important; }
(changing img to the name of the type of images you want to apply this to). if you link to the specific page you want for this I could be more specific.
Awesome tutorial. Thanks!
You are awesome. I just followed your clear, concise instructions and added a banner to a site I'm designing. Thanks so much. Keep it up!
Great! I'm happy people are finding it useful!
Thanks for the great tips... I want to display many rollover buttons on one page, so the fixed positioning isn't necessary... am wondering what the css would be for multiple buttons.
Thanks!
Michelle