一、前言
前端没有太难的地方，只是需要不断熟练而已，所以从本文开始，将试着带大家使用纯js、html、css这三个基石，来实现前端一系列看起来很美观的东西。
通过亲手将这些东西实现出来，可以让你更快理解到前端开发的精髓。
而本文要实现的是用的最多的一个控件：按钮。
二、代码实现
对于正常开发而言，一般都是使用的多文件，但本教材为了方便大家好看，都直接将其写在了一个html文件中。
用的编辑器为vscode，前面文章中也已经说过了，这里不再赘述。
首先创建一个button.html的文件，然后用vscode打开它，输入!，就会弹出提示，按Enter后，就会出现下面这样的默认代码：
按钮本身html是有一个现成的按钮标签的，但我这里先不用，直接使用啥都没有的div标签：
首先写好style标签，并在div标签上写好类，之后就可以通过类选择器选中它，给它应用样式，这里暂时只写了宽高的样式。
下面的script标签，则用于后面写控制代码的，这里先不用管。
1.按钮样式
首先第一步是让我们按钮变的好看起来，最直接的方式就是改变它的背景色和字体颜色：
背景色是background-color，字体颜色是color，通过十六进制颜色数值进行设置，然后刷新一下网页，就可以看到这个按钮是不是好看起来了？
你可能会问我这些好看的颜色怎么来的，如果你没有特别好的配色天赋，那么最好的方式就是直接看其它人是怎么用的，然后直接将其颜色复制过来即可。
比如我用的屏幕截图工具snipaste就带有取色工具，看到好看的网页、软件，就直接取色将其保存下来即可，后面想用的时候就用，很方便。
说会正题，下一步我们还可以让它变成圆角，更好看！
这个border-radius属性就是用来设置四个角圆的半径的，这里为5px，注意px意思是像素。
如果你想让这个标签完全变成一个圆，那就可以让标签的宽高相等，比如都为20px，然后让border-radius为10px，也就是四个角的圆半径刚好为正方形的一半，这样就成为一个圆了。
除此之外，可能我们还想要让它在我们鼠标放在上面时，自动改变颜色，那么只需要选中它的伪选择器hover即可：
