卡卡网

本文介绍一个CSS实现的漂亮好看的激活按钮动画（Activate Button animation），它适用于一些需要验证的交互网页里。

效果如图

demodownload

实例介绍

本动画实例可分四个阶段，每个阶段显示的样式不一样，这四个阶段不间断自动衔接，形成一个个性化的动画：

1. CSS实现的“激活”按钮，左侧为一个向上的箭头图标；
2. 点击后，“激活”文字变成“等待...”，同时左侧箭头变成转动的圆环；
3. 稍后文字提示变成“完成”，这时左侧图标变成一个打√的图标；
4. 稍等1秒后，按钮文字和图标再恢复原状。

HTML代码

HTML结构中，最外层是一个a标签，第二层是一个<span></span>标签，与一个<ul></ul>标签。

span标签里含有3个svg画布，ul标签里是3个li列举。

<a class="activate">
    <span>
        <svg>
            <use xlink:href="#circle">
        </svg>
        <svg>
            <use xlink:href="#arrow">
        </svg>
        <svg>
            <use xlink:href="#check">
        </svg>
    </span>
    <ul>
        <li>激 活</li>
        <li>等待...</li>
        <li>完 成</li>
    </ul>
</a>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="circle">
        <circle cx="8" cy="8" r="7.5"></circle>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="arrow">
        <path d="M2.7008908,5.37931459 L2.7008908,5.37931459... Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" id="check">
            <path id="test" d="M4.76499011,6.7673683... Z"></path>
    </symbol>
</svg>

CSS代码

CSS代码中，.activate是设置按钮的样式，.activate span是设置按钮图标的样式，.activate ul则是设置按钮文字的样式。

部分代码如下：

.activate {
  display: table;
  background: #5628EE;
  box-shadow: 0 4px 20px rgba(86, 40, 238, 0.15);
  line-height: 20px;
  padding: 12px;
  border-radius: 22px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.activate span {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  margin: 0 4px 0 0;
  position: relative;
  overflow: hidden;
}
.activate ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 20px;
  width: 60px;  /* 文字容器宽度 */
  display: inline-block;
  vertical-align: top;
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

需要特别指出的是，如果你想改变按钮的文字，那么需要重新定义按钮文字容器的宽度，代码是这个：

.activate ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 20px;
  width: 60px;  /* 按钮文字容器宽度 */
}

JavaScript

本实例需要用到一点JavaScript编程，它的作用是触发并自动完成4个激活过程（触发、等待、完成、复原），使用的JQuery方法是addClass()和removeClass()。代码如下：

$('.activate').on('click touch', function (e) {
  var self = $(this);
  if (!self.hasClass('loading')) {
    self.addClass('loading');
    setTimeout(function () {
      self.addClass('done');
      setTimeout(function () {
        self.removeClass('loading done');
      }, 1600);
    }, 3200);
  }
});

总结

本文介绍了一个CSS实现的漂亮好看的激活按钮动画（Activate Button animation），它适用于一些需要验证的交互网页里。本实例需要用到SVG画布，也需要编写一点JavaScript程序，但都易理解，不复杂。喜欢该效果的朋友可以收藏本页，也可以直接下载源码备用。

相关文章

• CSS3实现的发光动画按钮(有光随鼠标移动的悬停效果)
• 4款CSS 3D按钮点击过渡效果
• 16款精美的CSS3动画按钮（有悬停动画效果）
• 9个CSS鼠标悬停效果
• 6个CSS按钮边框过渡动画效果
• 30个漂亮的CSS渐变按钮，鼠标滑过(hover)动画效果
• 很好看的css3动画按钮鼠标悬停效果【2个实例】
• 漂亮悬停效果的CSS3动画按钮【5个实例代码】

标签: button  激活按钮  动画按钮  css