Как создать кнопку с изображением без анимации кликов?

Question

У меня есть изображение, которое я должен использовать для кнопки, и в настоящее время кнопка представляет собой только тег <a> с изображением и событием клика. Когда вы нажимаете, это не делает маленькую анимацию нажатия, которая заставляет ее выглядеть так, будто она заходит на страницу.

Как я могу воспроизвести это поведение с использованием фактического <input>?

Answer 1

<button> 
    <img src="http://www.placekitten.com/150/150" width="150" height="150" /> 
</button> 

jsFiddle example

Answer 2

Если вы хотите работать с входным теге дать ему класс, чем использование CSS, чтобы добавить изображение

.inputImage 
{ 
    background-image:url('yourpic.jpg'); 
    background-repeat:no-repeat; 
    background-position:left top; padding-left:15px; 
} 

Answer 3

Вы можете попробовать CSS и HTML и JQuery для создания кнопку, чтобы ее можно было использовать несколько раз.

JSFiddle: http://jsfiddle.net/c7eDD/

HTML:

<a class = "button">A</a> 

CSS:

a.button { 
    background:  #ffffff; 
    padding:   2px 8px 2px 8px;  /* Button padding */ 
    font-size:  12px; 
    font-weight:  bold; 
    display:   inline; 
    color:   #888888; 
    border:   1px solid #cccccc; 
    border-radius: 32px;     /* Rounder corners */ 
    font-family:  Arial, sans-serif; 

    cursor:   pointer;   /* Resurrect the pointer */ 
    text-decoration: none;     /* Remove default underline style from hyperlink */ 
} 

/* I decided to separate gradients */ 
a.button { 
    background: rgb(255,255,255); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0); /* IE6-9 */ 

} 

.Hover { 
    border: 1px solid #bbbbbb !important; 
    color: #777777 !important; 
    box-shadow: 0px 1px 2px #dddddd; 
} 

.Pressed { 
    background: rgb(229,229,229) !important; 
    -moz-box-shadow: 0px 1px 1px 0px #cccccc inset; 
    -webkit-box-shadow: 0px 1px 1px 0px #cccccc inset; 
    box-shadow:   0px 1px 1px 0px #cccccc inset; 
    text-shadow: 0px 1px 0px #fff; 
} 

JQuery:

$(document).ready(function() 
{ 

    $(".button").mouseover(function() 
    { 
     $(this).addClass("Hover"); 
    }); 

    $(".button").mouseout(function() 
    { 
     $(this).removeClass("Hover").removeClass("Pressed"); 

    }); 

    $(".button").mousedown(function() 
    { 
     $(this).addClass("Pressed"); 
    }); 

    $(".button").mouseup(function() 
    { 
     $(this).removeClass("Pressed"); 
    }); 

});