CSS生成Windows樣式按鈕

Question

我在嘗試創建和模仿Windows主題樣式按鈕時嘗試了幾個網站。什麼樣的CSS風格模式將基本上鏡像下面的圖片中找到的那些按鈕？

在圖片中，有一個不活動狀態，懸停狀態和默認狀態的按鈕

Answer 1

你需要的組合：

邊框樣式

邊框寬度

border-color

邊界半徑

背景：線性漸變

在這裏閱讀的文檔：http://www.w3schools.com/css/default.asp 對於CSS和CSS3

Answer 2

漸變，使用這個在線工具來生成CSS爲您提供：Colorzilla您需要申請CSS border屬性。

然後，您可以使用CSS :hover選擇器來更改它在外觀上按鈕元素的外觀。

我希望這會給你一個開始。所以先玩這些東西，讓我們知道結果。然後我們會給你更多的細節。

Answer 3

開始用默認狀態：

button { 
    border: 1px solid black; 
} 

懸停狀態：

button:hover { 
    border: 1px solid blue; 
} 

Disable狀態：

button[disabled=disabled] { 
    border: 1px solid grey; 
} 

這些樣式是不完整的，但選擇是最重要的事情。

圓角效果是通過將border-radius: 3px;添加到button css中生成的。

要獲得漸變，您需要使用background和linear-gradient;我推薦一個像www.cssmatic.com/gradient-generator這樣的工具來爲你生成樣式。