Trying to make a pretty button

Question

I'm trying to make a pretty button but I'm not a CSS (or HTML) guy. I'm just trying to hobble together something nicer than a square.

I found the Sliding doors CSS example and like it, I've gotten some of it working correctly, but can't seem to get the left side to look correct.

Any CSS gurus willing to point me in the right direction. I think I'm declaring the span incorrectly.

Thank you.

<style type="text/css">
input.submitBtn  
{
    position: relative;
    border: 0; 
    cursor: pointer;
    overflow: visible; /* removes extra side padding in IE */
    padding: 0 15px 0 0; 
    margin-right:5px; 
    font-size:2em; 
    text-align: center; 
    background: transparent url(images/btn_blue_sprite.gif) no-repeat right -140px; 
}

input.submitBtn::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
}

input.submitBtn::span 
{
    position: relative;
    display: block; 
    white-space: nowrap;    
    padding: 13px 0 0 15px; 
    height:37px; 
    background: transparent url(images/btn_blue_sprite.gif) no-repeat left top; 
    color:#fff; 
}

input.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
    background-position: right -210px; 
}

input.submitBtn:hover span, button.submitBtnHover span {
    background-position: 0 -70px;
}

Answer 1

I found the error of my ways. I didn't have the button inside a . While I haven't gotten completely working yet, I did get a pretty button to show up.

Answer 2

You haven't really described enough about what you want to accomplish for me to give a great answer, but if you just want a nice looking single 'button', you can use any image and add script to its click event so that it acts like a 'real' button.