Customize Buttons

For all you web developers out there, I have come out with a new way of decorating and customizing buttons. Here's the code:

Example

Bronze Button

.bronze{
float:left;
text-align:center;
background-color:#ccbbaa;
border-left:4px #ffeedd solid;
border-right:4px #554433 solid;
border-top:4px #ddccbb solid;
border-bottom:4px #776655 solid;
cursor:pointer;
width:100px;
}
.bronze:hover{
float:left;
text-align:center;
background-color:#ccbb88;
border-left:4px #ffeebb solid;
border-right:4px #554411 solid;
border-top:4px #ddcc99 solid;
border-bottom:4px #776633 solid;
cursor:pointer;
width:100px;
}

To use this button, use this code:

<div onselectstart="return false;" style="color:black" class="bronze">Bronze Button</div>

The advantage of this vs. the <button> and <input type="button"> is that this method is very VERY customizable. For example, this method could create a button with text, video, and images all at the same time. With this method, any type of content could fit inside. Also, the colors are customizable.

Hello, I am John. This is my new picture.
This button has 50% opacity.

I have tested this, and it works in Firefox, Chrome, and Internet Explorer.