如何使文本或html标签看起来像一个按钮 [英] How to make a text or html tag look like a button

问题描述

我想显示一个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标签看起来像一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！