Превратить изображение в изображение кнопки: удалить границы

Question

У меня есть эта ссылка со следующим css.

    <a href="step1.php">Buy Now</a>

    //css

    #buy a {
    background:transparent url(signup_bt.gif) repeat scroll 0 0;
    color:#FFFFFF;
    display:block;
    font-size:14px;
    font-weight:bold;
    height:37px;
    line-height:38px;
    text-align:center;
    text-decoration:none;
    width:126px;
    }

#buy a:hover{
background:transparent url(signup_bt2.gif) repeat scroll left bottom;
}

Теперь мне нужно изменить ее на кнопку отправки, чтобы использовать ее в форме и выглядеть точно так же, как раньше. Я сделал это:

<input type="submit" value="Buy Now" />

#buy input{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
height:37px;
line-height:38px;
text-align:center;
text-decoration:none;
width:126px;
background:transparent url(signup_bt.gif) repeat scroll 0 0;
display:block;
}

#buy input:hover{
background:transparent url(signup_bt2.gif) repeat scroll left bottom;
}

Это почти сработало, но у него ужасная граница вокруг него, и при наведении кнопка переходит на страницу. Как я могу это исправить?

Как убрать границу и как заставить кнопку просто поменять изображения обычным образом и не переходить на страницу.

Спасибо всем

Answer 1

чтобы убрать границу

border:0px;

Answer 2

Я использую границы: нет в моем CSS. У меня это работает.

Answer 3

почему вы не используете <input type="submit" src="signup_bt2.gif" />?