製作可擴充套件的按鈕

下面這段css**給body中class="btn"的按鈕新增了一些效果，css**如下：

.btn

效果如下：

按鈕看上去不錯，但是當我們想擴充套件一下，做乙個大一號的按鈕的時候，我們要改很多東西，改字型，改行高，改邊框半徑等等所有影響到按鈕整體協調性且用px為單位的屬性。所以為了按鈕的可擴充套件性，我們要用相對的單位em或者百分比代替px值，但是在此

之前一定要明白哪些效果應該隨著按鈕一起增大，哪些效果應該保持不變。現在我們把除了邊框（希望大按鈕也保持1px的邊框）以外的值都用相對單位em（相對於父級元素字型大小,父級元素預設字型大小16px，1em=16px）來改寫，css**如下：

.btn

現在我們將按鈕的父級元素body的字型增大一倍：

body

再來看看按鈕的效果：

可以看到按鈕整體增大了一倍。效果看上去跟小的按鈕一模一樣。

關於可擴充套件的按鈕，還要考慮陰影，在白色的背景上，灰色陰影比較好，但是換成別的顏色的背景，要考慮改變text-show，border-shadow的顏色。但這個有個很好的解決方法就是把半透明的白色rgba（1,1,1,.5）或半透明黑色rgba（0,0,0,.5）

的陰影疊加到主色調上就能產生和主色調相協調的陰影。

現在如果我們想要擴充套件乙個兩個按鈕，乙個紅色的「確定」按鈕，乙個綠色的「取消」按鈕時候。只用在我們想要的按鈕上加入這個.btn的類，此外寫乙個重寫background-color屬性來覆蓋.btn中的background-color屬性即可

html**如下：

1
<
button 
class
="btn"
>yes!
button
>
2<
button 
class
="ok btn"
>確定
button
>
3<
button 
class
="cancel btn"
>取消
button
>

css**如下：

.btn

12.ok

15.cancel

效果如下：