html - 如何从没有点击动画的图像创建按钮？

Question

我有一个需要用于按钮的图像，目前该按钮只是一个<a>带有图像和单击事件的标签。单击时，它不会执行使它看起来像沉入页面的小压抑动画。

如何使用实际复制此行为<input>？

Answer 1

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

jsFiddle 示例

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

查询：

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

});