はにわまん
マテリアルデザインでよく見るボタンです
クリック時に波状に広がるボタンの作り方です。
ボタン
<div class="btn-wave">ボタン</div>
.btn-wave {
display: inline-block;
padding: .6em 2em;
background-image: none;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border: none;
border-radius: 0;
cursor: pointer;
-webkit-appearance: none;
position: relative;
box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
width: 100%;
overflow: hidden;
}
.ripple {
position: absolute;
width: 0;
height: 0;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.4);
opacity: 1;
transform: scale(0);
}
.ripple-animation {
animation: ripple .6s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2);
}
}
jQuery(function($) {
$('.btn-wave').on('click', function(e) {
var wave_width = $(this).width(),
wave_height = $(this).height(),
wave_x = $(this).offset().left,
wave_y = $(this).offset().top;
// 大きい方の幅に合わせる
var size = wave_width >= wave_height ? wave_width : wave_height;
// 波紋要素を追加
$(this).prepend('<div class="ripple"></div>');
// 中心座標を算出
var x = e.pageX - wave_x - size / 2,
y = e.pageY - wave_y - size / 2;
$('.ripple').css({
width: size,
height: size,
top: y + 'px',
left: x + 'px'
}).addClass('ripple-animation');
});
});
おわり
クリック時に波状に広がるマテリアル風なボタンをCSSとJavaScriptで表現。
マテリアルデザインの引き出しを増やしていきたいところ。