如何創建按鈕？

1

你不能做到這一點使用CSS孤單。

您需要使用Javascript來更新一個布爾變量，該變量包含按鈕的狀態：按下或釋放並相應地更改元素的CSS類。

關於SO，請參見jQuery UI demo或How do you create a toggle button?問題。

來源

2010-05-13 11:55:45

+0

實際上，你甚至不需要一個變量，只需要對「正在按下」或「釋放」的html元素的當前類進行操作 – 2010-05-13 12:20:47

2

首先，創建作爲你的風格的元素的元素：

<span class="toggle">Click!</span>

現在你可以樣式此元素，像艾雲Systad描述：

.toggle { 
    padding: 5px; 
    background: #DDD; 
    border-top: 2px solid #CCC; 
    border-left: 2px solid #CCC; 
    border-right: 2px solid #555; 
    border-bottom: 2px solid #555; 
} 

.toggle.down { 
    border-top: 2px solid #555; 
    border-left: 2px solid #555; 
    border-right: 2px solid #CCC; 
    border-bottom: 2px solid #CCC; 
}

最後，添加切換功能，使用javascript（或在我的示例中，jQuery）：

$(".toggle").click(function(){ 
    $(this).toggleClass("down"); 
});

如果使用javascript是一個問題，您需要尋找其他解決方案。你可以使用複選框;這個元素本身具有檢查和未檢查狀態。但是，您可能無法在每個瀏覽器中以相同方式設置複選框的樣式;我甚至不知道你是否可以在IE中設計獨立的狀態。

來源

2010-05-13 11:54:58 Scharrels

+1

我想什麼他要求的是一種方法，鏈接樣式，使它們看起來就像個按鍵，而不是使用表單控件。編輯：現在我已經重讀他的帖子，他也在尋找一個切換按鈕，我不認爲你可以用窗體按鈕做什麼？（afaik） – 2010-05-13 11:56:42

+0

這就像，當我點擊時，它會再次出現。其實，我不想等到它再次點擊。喜歡它應該進去。如果我再次點擊它應該會達到原始形狀 – Manoj 2010-05-13 11:58:45

+1

確實，他在問如何模仿一種舊式的按鈕控制，它比按鈕更像複選框。你點擊它，並保持「卡住」，直到你再次點擊它。我經常想知道爲什麼在瀏覽器的不合格*輝煌時期，至少IE不允許你設計類似這樣的複選框。 – 2010-05-13 12:00:09

0

給它一個類，像「按鈕」，然後「反轉」邊界：激活。例如：

.button { 
    padding: 5px; 
    background: #DDD; 
    border-top: 2px solid #CCC; 
    border-left: 2px solid #CCC; 
    border-right: 2px solid #555; 
    border-bottom: 2px solid #555; 
} 

.button:active { 
    border-top: 2px solid #555; 
    border-left: 2px solid #555; 
    border-right: 2px solid #CCC; 
    border-bottom: 2px solid #CCC; 
}

是這樣的：http://jsfiddle.net/8wfw3/

來源

2010-05-13 11:55:30

1

您可以在頂部和左側設置白色邊框，在底部和右側設置黑色邊框。只需按下按鈕即可。如果這還不夠，你可以使用圖像。

button { 
     border-width: 1px; 
     border-color: white black black white; 
     border-style: solid; 
} 
button:active { 
     border-color: black white white black; 
}

來源

2010-05-13 11:56:09

2

我不認爲你可以用html按鈕。它沒有'上'和'下'的狀態。

我想你需要使用一個複選框，以便你有兩種狀態（這是一個帶有複選框類型的html輸入標籤）。然後，您可以使用一些JavaScript在複選框上顯示兩個不同的圖像，具體取決於它是否被選中。

來源

2010-05-13 11:59:45 philhobgen

0

你爲什麼不試試發電機？這樣 http://css-button-generator.com/

代碼示例...

<style type="text/css"> 
.css_btn_class { 
    font-size:20px; 
    font-family:Arial; 
    font-weight:normal; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    border-radius:8px; 
    border:1px solid #ffaa22; 
    padding:16px 38px; 
    text-decoration:none; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23)); 
    background:-moz-linear-gradient(center top, #ffec64 5%, #ffab23 100%); 
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23'); 
    background-color:#ffec64; 
    color:#333333; 
    display:inline-block; 
    text-shadow:1px 1px 0px #ffee66; 
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af; 
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af; 
    box-shadow:inset 1px 1px 0px 0px #fff6af; 
}.css_btn_class:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64)); 
    background:-moz-linear-gradient(center top, #ffab23 5%, #ffec64 100%); 
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64'); 
    background-color:#ffab23; 
}.css_btn_class:active { 
    position:relative; 
    top:1px; 
} 
/* This css button was generated by css-button-generator.com */ 
</style>

來源

2013-01-01 19:19:35

如何創建按鈕？

回答

相關問題