有反馈信息的按钮

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7143924…

起因

在日常的开发中，按钮是必不可少的。可是在屏幕上点击，没有一个反馈，我怎么知道自己有没有点击呢。市面上有各式各样的点击反馈效果。我做了一个简单易懂的按钮信息反馈如下：

思路拆解

1. 按钮美化，支持圆角、无边框、喜欢的颜色、小手图标和阴影显示。
2. 按钮交互，hover：背景颜色修改；focus：背景颜色高亮；active：阴影效果显示。

实现

1. 按钮基本骨架-html。

2.  <div id="app">
       <button type="button">快来点我</button>
     </div>
   

3. 按钮美化。

4. button{
     height: 40px;
     padding: 6.4px 20px;
     font-size: 16px;
     border-radius: 40px;/*圆角*/
     cursor: pointer;/*小手图标*/
     background: rgb(74, 161, 207);
     color: aliceblue;/*字体颜色*/
     border: 0px solid transparent;
     box-shadow: 0 0 10px #00000004;/*阴影*/
     transition: all 0.3s ease;
   }
   

5. border-radius在上个动画中我们也使用过了 ，可以在温习下。

6. box-shadow 参考文章，讲的挺详细。设置盒子的阴影。

7. 按钮交互

8. button:hover{
   	background-color: rgb(170, 205, 224);
   }
   button:active{
   	box-shadow: 0 0 10px rgb(129, 180, 189) ;
   }
   button:focus{
   	background-color:rgb(74, 161, 207);
   }
   

总结

日常开发中，把更多的经历关注了需求开发中，对样式的关怀总是不够多，在这次的活动中，可以温习一下css知识。

补充

按压效果的按钮