前言一

按钮在前端开发中往往是一个必不可少的元素，也有许多精美好看的样式资源供开发者直接使用。但博主认为，对于初学者而言，总是去cv别人做好的，而不理解其中的原理，是很不好的。
本人作为一名计科的学生，在大二也选修了校内的前端基础教程的课，但由于课时较短，老师往往不会深入讲解，许多问题无法深究。
本篇文章将会详细讲解xia五种简单的按钮样式，虽然简单，但作为基础，也很实用，且有着大学问。

文章目录

• 前言一
• 开始之前
• 一、鼠标悬浮，按钮背景滑动（1）
• • 1.最终效果
  • 2.创建元素
  • 3. 重置浏览器样式，并使元素居中
  • 4.设置统一的样式
  • • 4.1 设置按钮的大小
    • 4.2 设置文字样式及鼠标hover后文字的变化
    • 4.3 在button元素前添加背景
  • 5.设置不同的hover效果</