我想創建一個按鈕，當它被按下時改變它的樣式。這是我的CSS代碼：按<button> CSS
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}<button>Button</button>，當我點擊它&保持它只是改變了。我想讓它在按下後改變風格。例如，正常狀態爲白色，點擊狀態爲綠色，點擊釋放後爲紅色。
如果您使用<a>標記代替按鈕，則可以執行此操作。我知道這不正是你要的，但它可能給你一些其他的選擇，如果你不能找到一個解決方案，以這樣的：從一個演示從這裏另一個答案
借用我公司生產的：
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}<a id="btn" href="#btn">Demo</a>請注意使用:target;這將是通過散列來定位元素時應用的樣式。這也意味着您的HTML將需要是這樣的：<a id="btn" href="#btn">Demo</a>一個定位它自己的鏈接。和演示http://jsfiddle.net/rlemon/Awdq5/4/
由於這裏@BenjaminGruenbaum是更好演示：http://jsfiddle.net/agzVt/
另外，作爲註腳：這真的應該使用JavaScript和應用做/從元素移除CSS類。它會更不復雜。
+1正確的解決方案。這裏是一個小提琴，我認爲更好地說明了這個解決方案http://jsfiddle.net/agzVt/ – 2013-03-17 17:47:11
這裏是一個清理的演示，增加了懸停效果以及http://jsfiddle.net/KyleMit/agzVt/153/ – KyleMit 2014-12-05 17:55:26
它是不過是一件小事，不是嗎？有沒有（非JS）的方式來按鈕，只需放棄對點擊完成的重點？ – 2015-01-30 14:46:01
您可以使用:focus，只要用戶不在其他地方點擊，它將保持不變。
button:active {
border: 2px solid green;
}
button:focus {
border: 2px solid red;
}
這不是一個好的解決方案，它不是他要求做的，一個CSS的方式是使用：checked選擇器並使用複選框 – 2013-03-17 17:33:06
@BenjaminGruenbaum這是一個很好的觀點 - 按鈕並不是真正被設計爲切換的。 – 2013-03-17 17:35:12
如果按鈕打開一個新頁面，你可以用php來做到這一點。
例如，如果按鈕鏈接到一個名爲pagename.php的頁面，url：www.website.com/pagename.php，只要您停留在該頁面上，該按鈕將保持紅色。
網址[0] = pagename.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'])+1,strlen($_SERVER['REQUEST_URI']))); ?>
<html>
<head>
<style>
.btn{
background:white;
}
.btn:hover,
.btn-on{
background:red;
}
</style>
</head>
<body>
<a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>
注：
我通過 '/' 一個有類似爆炸的URL我沒有嘗試這個代碼。它可能需要調整。
我們應該包括一個小JS嗎？因爲CSS基本上不是爲這個工作創建的。 CSS只是一種樣式表，可以將樣式添加到HTML中，但其僞類可以完成基本CSS無法完成的操作。例如button:active active是僞的。
參考：
http://css-tricks.com/pseudo-class-selectors/您可以瞭解更多關於假這裏！
您的代碼：
，你遇到的基本的，但樂於助人的代碼。只有觸發點擊事件後纔會發生:active。
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
這是CSS會做什麼rlemon建議是好的，但是這將是他建議將需要a標籤。
如何使用CSS：
可以使用:focus了。 :focus會在點擊完成後繼續工作，直到您點擊其他地方，這是CSS，您正在嘗試使用CSS，因此請使用:focus來更改按鈕。
JS會怎麼做：
的JavaScript的jQuery庫將幫助我們爲這個代碼。這裏是例子：
$('button').click(function() {
$(this).css('border', '1px solid red');
}
這將確保按鈕保持紅色，即使點擊跳出。要改變聚焦型（改變紅等顏色），您可以使用此：
$('button').click(function() {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
這種方式，您將創建一個導航菜單。當你點擊它們時，它會自動改變標籤的顏色。 :)
希望你得到答案。祝你好運！乾杯。
你要添加一些JavaScript。 – MattDiamant 2013-03-17 17:32:19
雖然這很可能使用CSS，但這不是CSS設計的目的。考慮JavaScript – 2013-03-17 17:32:23
可能的重複http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-it-has-been-clicked – 2013-03-17 17:33:15