butten有哪些种类？不同类型的区别是什么？

今天我来给大家唠唠这个按钮（button）的事儿。前些日子我不是在捣鼓一个项目嘛里头需要用到不少按钮，我就想着，这按钮不就点一下触发个啥事儿么，还能玩出花来？结果一上手，还真有点门道。

我就是简单地用个 <input type="button" />，心想这不就完事儿。结果发现，这玩意儿就长得贼丑，跟我那项目的风格完全不搭。而且啥功能也没有，就是个光秃秃的按钮，点它也没反应，还得我自己写脚本让它动起来，这哪行。

然后我就开始琢磨，这按钮肯定不能这么简单。我就去翻翻资料，好家伙，还真有好多类型，什么胶囊按钮、圆形按钮、普通按钮，看得我眼花缭乱的。我就想，先试试看这些类型长啥样。

于是我就开始一个一个试。先是普通按钮，这玩意儿就是最基础的，长得也最普通，不过也还行，起码比那个光秃秃的 <input> 强多。然后是胶囊按钮，这个长得就像个胶囊似的，两头圆圆的，还挺有意思。是圆形按钮，这个更简单，就一个圆圈，里头可以放个图标啥的。

试一圈下来，我发现这些按钮虽然长得不一样，但是用起来都差不多，都是可以点的，点完之后可以触发一些操作。不过这些按钮的外观我还是不太满意，感觉还是有点单调。我就想着，能不能给它们加点特效？

• 于是我就开始研究各种样式。什么扁平样式、圆角样式、阴影样式、渐变样式，我一股脑全试个遍。
• 扁平样式就是把按钮的边框去掉，让它看起来更简洁。
• 圆角样式就是把按钮的四个角变成圆角，这样看起来更柔和一些。



• 阴影样式就是给按钮加个阴影，让它看起来更有立体感。
• 渐变样式就更酷，可以让按钮的背景色渐变，看起来很炫。

这么一通折腾下来，我总算是找到我想要的按钮的样式。但是，光好看还不行，还得好用。我就又开始研究怎么给按钮添加各种事件，比如鼠标悬浮上去的时候，让按钮变个颜色；鼠标点下去的时候，让按钮动一下，还有点击样式。这样，用户一用就知道这个按钮是干啥的，用起来也更爽。

经过这一番实践，我算是明白，这按钮，还真不是那么简单的。这里头的学问大着，不仅要好看，还得好用，更得符合项目的整体风格。以后再做项目的时候，可得好好琢磨琢磨这个按钮该怎么设计。

我还发现一个小技巧，就是可以把几个按钮放在一起，然后通过代码控制它们的显示和隐藏，这样就可以实现一些更复杂的功能，感觉还不错！这一天天的，还真是有不少的收获！