Menu
I’m trying to add some simple social networking rollovers to my website, but can’t quite get them how I like. Thank you in advance for any help. My site is located here:
[url]http://www.esteindesign.com/new/portfolio/work/
I have two things I’d like to improve:
1.
I would like to space the buttons out a bit. About 15 px each. I have tried to adjust the padding, but somehow I am having trouble moving both the original and the hover state.
Visual appearance: In the non-hover state, you can still see a bit of the hover state around the edges. This is especially noticeable on the Facebook button since the hover is darker. Is there any way to fix this? Also, the buttons seem to flicker a lot, is that just how CSS rollovers work?
Here’s the code I’m working with:
HTML:
<div class=”iconfacebook”>
<a href=”
<div class=”icontwitter”> <a href=”
<div class=”iconfeed”>
<a href=”
</div>
CSS:
.iconfacebook
{
position: relative; background: url([url]http://www.esteindesign.com/new/wp-content/uploads/badges/facebookblue.png
display: block; width: 40px; height: 40px; margin: 0; padding: 0; float:left;
}
.iconfacebook img
{
width: 40px; height: 40px; border: 0
}
* html a:hover
{
visibility:visible
}
.iconfacebook a:hover img
{
visibility:hidden;
}
.icontwitter
{
position: relative; background: url([url]http://www.esteindesign.com/new/wp-content/uploads/badges/twitterblue.png
display: block; width: 40px; height: 40px; margin: 0; padding: 0; float:left;
}
.icontwitter img
{
width: 40px; height: 40px; border: 0;
}
.icontwitter a:hover img
{
visibility:hidden;
}
.iconfeed
{
position: relative; background: url([url]http://www.esteindesign.com/new/wp-content/uploads/badges/rssorange.png
display: block; width: 40px; height: 40px; margin: 0; padding: 0; float:left;
}
.iconfeed img
{
width: 40px; height: 40px; border: 0
}
.iconfeed a:hover img
{
visibility:hidden
}