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

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 ウェブデザインギャラリー