CSS微动画 - 按钮效果只有一种太单调啦！

Q: 网路上找到的看起来都很厉害，程度能比吗？
A: 厉害归厉害，每个效果都适合你的网站吗？

让元素对使用者的操作有「回应」可以让使用者有跟网页「互动」的感觉，透过css让元素有「微动画」的效果，以提昇网页的质感！上一篇有提到可以针对元素的状态:hover、:active等伪类进行样式的修改，搭配transition让元素在状态间的变化有渐进感，达到「微动画」的效果。

本篇将继续使用:hover、:active及transition制作多种按钮的动态效果，看完本篇後会发现，其实不用引用套件(库)，自己写效果加上class就可以让元素动起来。

/* 以下每个范例都将使用相同的基础html及css，如下：*/
<style>
  .btn {
    position: relative;
    margin: 300px;
    width: 150px;
    line-height: 60px;
    font-size: 20px;
    color: RoyalBlue;
    text-align: center;
    background-color: Lavender;
    cursor: pointer;
    transition: .1s;
  }
</style>
  
<div class="btn">I'm a button</div>

阴影效果浮出按钮

<style>
  .btn_float:hover {
    transform: translateY(-6px);
    box-shadow: 2px 2px 6px 2px RoyalBlue;
  }
  .btn_float:active {
    transform: translateY(-6px) scale(.98);
  }
</style>

内阴影效果按钮

<style>
  .btn_shadowInset {
    box-shadow: inset 0 0 0 0 transparent;
  }
  .btn_shadowInset:hover {
    box-shadow: inset 0 0 6px 2px RoyalBlue;
  }
  .btn_shadowInset:active {
    box-shadow: inset 0 0 6px 4px RoyalBlue;
  }
</style>

导角变化效果按钮

<style>
  .btn_borderRadius:hover {
    border-radius: 15px;
  }
</style>

知己知彼百战百胜

当你开始用transition并可以透过伪元素新增变化时，就可以不受限於别人写好的效果，做出属於自己的风格。谜音：而且不用多写很多程序码呢～

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