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

WS003148
このエントリーをはてなブックマークに追加
PR
DEMO 表示

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

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

button

 

 

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
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)