題外話：

從今天開始，我準備開設一個新的專欄，專門寫 使用CSS實現各種酷炫按鈕的方法，本專欄目前準備寫40篇左右，大概會完成如下按鈕效果：

今天，我來介紹第一個按鈕的實現方法：會討好的熱情按鈕。為什么我給它起這樣的名字呢？你看它像不像一個不停搖尾巴的小黃？當你鼠標移動到它頭上，它的文字還會轉起來，像是瞇起來的萌眼睛。

開工前的準備工作

在制作按鈕之前，我們通常要做一件事：清除瀏覽器的默認樣式。相信很多小伙伴都知道該怎么做。我這里就不多說了，簡單寫幾行不影響做按鈕的表現就行了。

清除瀏覽器的默認樣式

*{margin:0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}  

其他需要的CSS

定義頁面基本顏色：

:root{--main-bg-color: #222;  /* 背景色*/--color:#000;/* 前景色 */
}

設定body的樣式：

body {width:100%;height: auto;background: var(--main-bg-color);   
}

清除button控件的默認邊框：

button{outline: 0;border: none;
}

給按鈕安一個家：

.container{/* 居中 */position: fixed;  left: 50%;top: 50%;transform: translate(-50%, -50%); 
}

（這一步不是必須的，我只是習慣性的讓可見元素在頁面居中，這樣看起來美觀，也不用總往屏幕左上角去歪頭或斜眼睛）

好了