如何從圖像中創建一個沒有點擊動畫的按鈕？

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"); 
    }); 

});