如何使文本或HTML标记看起来像一个按钮

问题描述：

我要显示一个p标签或图例标签或任何HTML文本像按钮。但是，怎么可能？我曾尝试使用CSS，但都不尽如人意。
我想表明它像按钮。

I want to show a p tag or legend tag or any html text like button. But how is it possible? I have tried with css but not working well. I want to show it like button.

<p class="button" >Submit</p>
or 
 <a class="button" >Submit</a>
 or
<legend class="button" >Submit</legend>

现在需要的按钮类。

答

方才得到了什么做我想要的。

Had just got what did I want.

DEMO的jsfiddle

DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}

如何使文本或HTML标记看起来像一个按钮

相关推荐