CSS技巧专栏：一日一例 1.纯CSS实现 会讨好的热情按钮 特效
题外话：
从今天开始，我准备开设一个新的专栏，专门写 使用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%);
}（这一步不是必须的，我只是习惯性的让可见元素在页面居中，这样看起来美观，也不用总往屏幕左上角去歪头或斜眼睛）
好了