Skem9 contact button codes

Skem9 Website Tutorials | Submited Dec 19, 2007

Written by:

Simple

.37182{hide the default buttons}
#ContactTable a img{visibility:hidden}

.37182{add link}
a.add2buds{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
}

.37182{block link}
a.blockbud{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
}

.37182{message link}
a.messagebud{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
margin-top:-16px;
}

Positioning

Scratch the last code and use this if you want to make them hard to find, like most do.
Adjust the top: and left: numbers

.37182{hide the default buttons}
#ContactTable a img{visibility:hidden}

.37182{add link}
a.add2buds{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
top:-100px;
left:-100px;
position:relative;
}

.37182{block link}
a.blockbud{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
top:-100px;
left:-100px;
position:relative;
}

.37182{message link}
a.messagebud{
background:#000 url(IMAGE_URL_HERE) center top no-repeat;
height:35px;
width:125px;
display:block;
margin-top:-16px;
top:-100px;
left:-100px;
position:relative;
}

Hovers

Add this in if you want the image to change when you hover it

.37182{message link hover}
a.messagebud:hover{background:#000 url(IMAGE_URL_HERE) no-repeat;}

.37182{block link hover}
a.blockbud:hover{background:#000 url(IMAGE_URL_HERE) no-repeat;}

.37182{add link hover}
a.add2buds:hover{background:#000 url(IMAGE_URL_HERE) no-repeat;}

on-hover messages

This is a bit more advanced, what it does is when (in this case) your message button is hovered it'll display a message of your choice.
You'll have to change the margin-top/margin-left numbers, don't change the left:50%; so it'll work in all resolutions.
this part you can pretty much change to any of the class names, I used the message class because that's the one I wanted

a.messagebud:hover:before{
content:'YOUR_MESSAGE_HERE';
display:block;
position:absolute;
left:50%;
margin-left:-400px;
margin-top:-40px;
background:#000;
text-align:left;
width:135px;
height:200px;
text-decoration:none !important;
border:0 !important;
}