html - 如何创建带有图像的按钮？

Question

我有一张图片，我想将其用作我页面上链接到其他页面的按钮。我想以一种可以在上面使用大小文本的方式进行制作。

相关图片:

我已经尝试了一些东西，但无处可去。

a {
    background:url(http://i.imgur.com/8Isga60.png);
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    padding:30px 100px;
    height:20px;
    color:black;
    font-size:16px;

}

JS Fiddle

Answer 1

我会建议您放弃图像的想法...这个概念非常 2005 年。使用今天的 CSS，您可以使用纯 CSS 轻松地重新创建该图像，这将更加灵活。

如果您用 Google 搜索“CSS 按钮生成器”，您会发现许多在线工具可以帮助您...即 http://www.cssbuttongenerator.com/

这是我在 10 秒内完成的一个示例，只是复制了他们提供的 CSS...当然它有点复杂，但它确实有效:

<style type="text/css">
.classname {
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:0;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
}.classname:active {
    position:relative;
    top:1px;
}</style>