Q
純CSS按鈕
2
A
回答
3
如果我正確理解你,你想使任意元素看起來像一個按鈕?
那麼... 只是相應地寫CSS!這裏有一個例子開球,這使得鏈接看起來像一個按鈕:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
+0
有一點修補這可以做exaclly我想要的感謝 – user377419 2010-08-16 00:59:50
3
恩,定義「按鈕」?如果你只是想一個基本的按鈕,你甚至不需要CSS,只需使用一個HTML的輸入或按鈕標記...
<input type="button" value="Press me!" />
或
<button>Press me!</button>
0
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
0
這裏有一些例子真棒 - Pure CSS Buttons - 不需要任何圖像,但都是合法的按鈕。我認爲你可以給它們中的一些添加一些漸變,但是除此之外它們看起來和Facebook,Twitter,Wordpress等類似。如果你不太瞭解CSS,我建議你只複製其中的一個例子。
1
這是一種沉悶,但得到的伎倆!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
0
這是一個非常簡單的設計,但看起來還不錯
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button"><a href="#">Click me</a></div><br/>
<a class="button-link" href="#">Click me, link only</a>
0
這一個看起來很可愛,acording我:)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />
相關問題
- 1. 帶有純HTML/CSS圖像的按鈕
- 2. CSS - 純CSS中的旋鈕光標+ AngularJS
- 3. 我可以使用純CSS(按鈕)製作此樣式
- 4. 醒目頁面純CSS和關閉按鈕
- 5. 最健壯的純CSS按鈕解決方案?
- 6. HTML/CSS按鈕
- 7. HTML/CSS按鈕
- 8. 純CSS
- 9. 純CSS
- 10. 純CSS
- 11. CSS響應按鈕
- 12. Css for .FileUpload按鈕
- 13. CSS雪碧按鈕
- 14. CSS按鈕調整
- 15. 按鈕中心CSS
- 16. Internet Explorer按鈕CSS
- 17. 按鈕樣式,css
- 18. 按鈕CSS問題
- 19. 讓票按鈕,CSS
- 20. PLAY按鈕(CSS,HTML)
- 21. CSS窗體按鈕
- 22. 破碎按鈕CSS
- 23. 按鈕在HTML/CSS
- 24. CSS切換按鈕?
- 25. CSS按鈕樣式
- 26. 的Facebook/Twitter的「贊」純HTML按鈕
- 27. 啓用/禁用純javascript中的按鈕
- 28. 純CSS導航
- 29. 純CSS滑塊
- 30. 純粹的CSS樣式單選按鈕組的方式沒有選中單選按鈕時?
你這是什麼想讓按鈕看起來像? HTML中有一個'
我猜你的Google版本無法使用。我返回了很多鏈接:http://www.google.ca/search?q = css +按鈕 – 2010-08-16 00:40:34