Buttons with mouse over and out function - php

Question

Check this url please http://x2t.com/262032
You can see how does facebook button work right side of navigation menu.
This code works with this button.
CSS
div.social-wrapper {
float: right;
text-align: right;
font-size: 15px;
font-weight: bold;
margin: 11px 15px 0px 0px;
}
div.social-wrapper-text {
margin-bottom: 10px;
}
div.social-icon:first-child {
margin-left: 0px;
}
div.social-icon {
float: left;
margin-left: 11px;
opacity: 0.55;
filter: alpha(opacity=55);
cursor: pointer;
}
I need the code for two facebook buttons with mouse over and out function.
On mouse over guest will see for example white FB button and on mouse over black one.
How to do this?

Answer 1

<button class="class_of_button"> like us on facebook </button>
.class_of_button {
background: url('source of fb image');
}
.class_of_button:hover {
background: url('source of black fb image');
}

Answer 2

Here my personal solution for this:
HTML:
<div class="social-icon">
<a href="CHANGE THIS LINK TO YOUR ONE">
<img src="MOUSE_OFF.jpg"></img>
<img src="MOUSE_ON.jpg"></img>
</a>
</div>
CSS:
<style type="text/css">
div.social-icon
{
width: 600px; /* Width of IMG, TO BE CHANGED *
height: 800px; /* Height of IMG, TO BE CHANGED *
}
div.social-icon img:nth-child(2)
{
display: none;
}
div.social-icon img:first-child
{
display: block;
}
div.social-icon:hover img:nth-child(2)
{
display: block;
}
div.social-icon:hover img:first-child
{
display: none;
}
</style>
Just put the CSS into the
and the html where you would have placed your button.
And don't forget to change the mentioned values in the css and html.
And yes: You have to create the images yourself, so show yourself some Paint skillz~