CSS微动画 - 为什麽别人的按钮点起来比较有感觉？

Q: 为什麽别人的按钮点起来比较有感觉？
A: 因为外国的月亮比较圆？

网页中常常会有很多可以点击的地方（按钮或是超连结），有些网站的按钮让人觉得「只是按钮」，而有些网站的按钮按起来时会让人有「回应」，会有这样的差别是因为按钮有在跟滑鼠「互动」。

普通的按钮

这是一颗常见的、普通的按钮，不论滑鼠对这颗按钮做了什麽它都无动於衷。

<style>
  .btn {
    width: 180px;
    line-height: 40px;
    font-size: 20px;
    color: PapayaWhip;
    text-align: center;
    background-color: Chocolate;
    border: 5px solid SaddleBrown;
    border-radius: 15px;
    cursor: pointer;
  }
</style>
  
<div class="btn">确  认</div>

点起来有感觉的按钮

要让鼠标跟元素有「互动」要善用:hover、:active等伪类，以下述例子来说，当:hover时将元素放大至1.05倍，当点击元素时则让元素还原至原本的大小且有内阴影。针对不同的状态给予不同的样式，这样当滑鼠在跟元素「互动」时，元素会反馈不同的「回应」。谜音：按起来是不是比较不一样？

<style>
  .btn:hover {
    /* :hover 代表滑鼠移到元素上时的状态 */ 
    transform: scale(1.05);
  }

  .btn:active {
    /* :active是滑鼠点击元素的状态 */
    transform: scale(1);
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .2);
  }
</style>

点起来更有感觉的按钮（？）

上面的按钮已经可以跟滑鼠「互动」了，只是元素在变化的过程看起来有点生硬，这时候就要用transition。transition这个属性操控元素的渐变，最快的下法就是对transition直接下秒数就可以了，这样元素在变化的时候就会以0.1秒的速度由原本的状态切换到後来的状态，以范例的:hover来说，就会以0.1秒的速度由1倍放大至1.05倍。

<style>
  .btn {
    transition: .1s;
  }
</style>

所以为什麽别人的按钮点起来跟自己做的不一样？

要让网页动起来、制作微动画的第一要点就是要让使用者跟画面「互动」，当使用者对元素进行操作时，画面让使用者有「被回应」的感觉是很重要的！善用伪类，在元素不同的状态给予不同的样式，并让样式变化时是渐进的、不那麽生硬，这麽一来画面看起来就有质感多啦～

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！