Question

我想显示p标签或图例标签或任何html文本，如按钮。但是怎么可能呢？我试过用css但效果不好。我想像按钮一样显示它。

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

enter image description here

现在需要按钮类。

Answer 1

只需将css样式和cursor: pointer;应用于它，即可显示它是一个按钮

.button{
  display: inline-block;
  background: #000;
  border-radius: 4px;
  font-family: "arial-black";
  font-size: 14px;
  color: #FFF;
  padding: 8px 12px;
  cursor: pointer;   
}

JSFIDDLE

Answer 2

使用css很简单。

<p class='btn'> Button 1 </p>

和你的CSS

.btn{
float:left;
width:auto;
height:30px;
display:block;
border:1px solid #ff6600;
background:#00ff00;
color:#000;
line-height:30px;
text-align:center;
padding:0 20px;
border-radius:3px;
}

.btn:hover{
 cursor:pointer;
}

jsfiddle：http://jsfiddle.net/ob67xnw4/1/

Answer 3

试试这个。

这是工作FIDDLE

<强> CSS

  .button {
  width: 75px;
  background: #d2d2d2;
  text-align: center;
  float: left;
  color: #000;
  line-height: 32px; 
  text-decoration: none;
}
.button: hover{
  width: 75px;
  background: #0e567f;
  color: #fff;
  text-align: center;
  float: left;
  line-height: 32px;
  text-decoration: none;
}

Answer 4

刚刚得到了我想要的东西。

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

Answer 5

<p class='button'> Submit </p>

.button{
        background: -webkit-linear-gradient(top, #CCB5B6 20%, #274936 70%);
        width: 100px;
        height: 40px;
        font-family: sans-serif;
        font-size: 25px;
        text-align: center;
        line-height: 40px;
        color: #96F256;
        border-radius: 10px;
        box-shadow: 0 2px 5px 3px black;
        cursor: pointer;
    }
    .button:hover{
        color: white;
    }

<强>输出

enter image description here

Answer 6

我认为您应该使用此代码并且它运行良好。您可以根据自己更改颜色。

Live Demo

HTML代码：

<input class="round-button-circle" type="submit" value="Submit"/>

CSS代码：

.round-button-circle {
width: 150px;
height:50px;
border-radius: 10px;
border:2px solid #cfdcec;
overflow:hidden;
font-weight: 15px;
background: #4679BD; 
box-shadow: 0 0 3px gold;
}
.round-button-circle:hover {
    background:#30588e;
}

<强>结果：

result

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

6 个答案: