Кнопка с изображением без использования type = "image"

Question

Я хочу добавить кнопку, которая выглядит как изображение, которое я назначу, но его тип не будет «изображение». Например:

<input type="button" someimagetag="someimagelink" />

Не как

<input type="image" src="" />

Как мне это сделать?

Answer 1

Вы можете стилизовать его как любой другой элемент, используя CSS.

Посмотрите на Bootstrap Twitter http://twitter.github.com/bootstrap/ любой элемент, который использует класс 'btn', будет использовать эти стили:

.btn {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-transition: all 0.1s linear 0s;
    background-color: #E6E6E6;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #FFFFFF 25%, #E6E6E6);
    background-repeat: no-repeat;
    border-color: #CCCCCC #CCCCCC #BBBBBB;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: normal;
    padding: 5px 14px 6px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

Имейте в виду, что они используют декларации CSS3 для стилизации своих элементов, но вы также можете использовать фоновое изображение.