ボタンをクリックした時に、波紋のようなエフェクト効果を与えるコード

DEMO 表示

ボタンを押した時にボタンの中心から円状に広がっていく効果を与えるコードの例

仕組みは、scaleとopacityを組み合わせてエフェクトを作り出しています。

100×100pxのブロックをつくり

それをborder-radiusでまんまるな円にします

これを、positionでボタンの中央に配置して

scaleを使って、0から1へ変化させる。scaleは要素の中心を起点に拡大、縮小するので 0から1とすることで中心からの広がりを表現できる

scaleの変化で広がったあとはopacityで透明になって消えていく

あとはjavascriptでCSSを付けたり消したりとしています

コード

HTML

<div id="button" class="android-btn"></div>
<div id="button2" class="android-btn ink"></div>

CSS

.android-btn {
  display: inline-block;
  font-family: "Roboto";
  font-weight: 300;
  font-size: 0.9vw;
  background: #5677FC;
  color: #fff;
  height: 36px;
  text-align: center;
  line-height: 36px;
  text-transform: uppercase;
  padding: 0 60px;
  border-radius: 1px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;;
}

.android-btn.active {
  background: #455EDE;
}

.android-btn:after {
  content: "Button";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.active:before {
  content: "";
  position: absolute;
  top: -32px; /* (button height - height) / 2 */
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: #3B50CE;
  border-radius: 100%;  
  
  -webkit-animation: scaleout 0.3s 1 ease-out;
  animation: scaleout 0.3s 1 ease-out;
  
  opacity: 0;
}

.ink {
  background: none;
  color: #1a1a1a;
}

.ink.active {
  background: #E0E0E0;
}

.ink.active:before {
  background: #BDBDBD;
}

/* Anmiation from http://tobiasahlin.com/spinkit/ */

@-webkit-keyframes scaleout {
  0% { 
    opacity: 1;
    -webkit-transform: scale(0.0) 
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    opacity: 1;
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

javascript

/* 
 * This is hacky, would use a library like  Angular.js in production
 */

var button = document.getElementById('button'),
    button2 = document.getElementById('button2');

button.addEventListener('click', function () {
  this.setAttribute('class', 'android-btn active');
  
  var self = this;
  setTimeout(function () {
    self.removeAttribute('class', 'active');
    self.setAttribute('class', 'android-btn');
  }, 300)
});

button2.addEventListener('click', function () {
  this.setAttribute('class', 'android-btn ink active');
  
  var self = this;
  setTimeout(function () {
    self.removeAttribute('class', 'active');
    self.setAttribute('class', 'android-btn ink');
  }, 300)
});

コードをファイルでダウンロードする

DOWNLOAD