如何使文本或html標籤看起來像一個按鈕

我想顯示一個p標籤或圖例標籤或任何html文本按鈕。但是怎麼可能呢？我曾嘗試過使用CSS，但效果不佳。我想顯示它像按鈕。如何使文本或html標籤看起來像一個按鈕

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

enter image description here

現在需要的按鈕類。

來源

2014-10-04 Muhammad Ashikuzzaman

將A元素或BUTTON元素以外的任何東西用作按鈕不是好習慣。以下是一些解釋原因：http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/ – Doug 2014-10-04 04:30:38

謝謝。其實我想在點擊假按鈕時調用一個JavaScript函數@Doug – 2014-10-04 04:34:30

A和BUTTON元素可以通過鍵盤訪問。其他一切都不是。希望你的用戶100％獨佔使用鼠標，永遠不要關閉Javascript。 – Doug 2014-10-04 04:38:23

方纔得到了什麼沒有我想要的。

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

來源

2014-10-04 04:50:17

只是FYI，你不需要： 'outline：none; text-align：center; text-decoration：none;'outline和text-decoration的默認值不會對'p'標籤做任何事情，text-align：center只會在你試圖將實際按鈕居中時才需要（不是內部的文本）在這種情況下，它需要放置在父級上，而不是按鈕上。 – jmore009 2014-10-04 04:52:12

嗯，我的一個很複雜，不容易理解，我只是分享它。但從你的答案和其他地方得到IDEA。謝謝。 – 2014-10-04 04:53:56

是的，剩下的事情對你正在嘗試做的事情都很好，讓這些行不會做任何事情，它只包括3條線，包括 – jmore009 2014-10-04 04:55:29

就應用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

來源

2014-10-04 04:27:14 jmore009

謝謝。我有一個解決方案，但你的一個更容易使用，而我的一個是複雜的大代碼。非常感謝。 @ jmore009 – 2014-10-04 04:42:17

謝謝差別太大了.... – 2014-10-04 04:43:34

沒問題。樂於幫助。當你有機會的時候你可以檢查一下這個問題是否可以關閉？ – jmore009 2014-10-04 04:45:51

嘗試。

這裏是工作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; 
}

來源

2014-10-04 04:32:15 KesaVan

你們都對我有幫助。只是幫助..我現在要去工作了。謝謝。 – 2014-10-04 05:01:00

@MuhammadAshikuzzaman：它的好，永遠歡迎 – KesaVan 2014-10-04 11:09:06

它與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/

來源

2014-10-04 04:37:07

謝謝。 @Munshi Azhar – 2014-10-04 05:00:17

<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

來源

2014-10-04 05:10:07

我認爲你應該使用這個代碼，它運作良好。你可以根據你改變顏色。

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

來源

2014-10-04 07:57:22 Developer

如何使文本或html標籤看起來像一個按鈕

回答

相關問題