@charset "utf-8";
/* CSS Document */
/*
引用元
https://coco-factory.jp/ugokuweb/move02/4-1/
*/
/*
HTMLメモ
<a href="#" class="btnripple">7-1-11 クリックしたら波紋が広がる</a>
*/
.btnripple {
 /*波紋の基点とするためrelativeを指定*/
 position: relative;
 /*はみ出す波紋を隠す*/
 overflow: hidden;
 /*ボタンの形状*/
 text-decoration: none;
 display: inline-block;
 /*background: #333;*/
 /*color: #fff;*/
 /*padding: 10px 20px;*/
 /* border-radius: 20vw;*/
 outline: none;
 width: 100%;
}
.btnripple::after {
 content: "";
 /*絶対配置で波紋位置を決める*/
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 /*波紋の形状*/
 background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
 transform: scale(10, 10);
 /*はじめは透過0に*/
 opacity: 0;
 /*アニメーションの設定*/
 transition: transform 0.3s, opacity 1s;
}
/*クリックされたあとの形状の設定*/
.btnripple:active::after {
 transform: scale(0, 0);
 transition: 0s;
 opacity: 0.3;
}
/*========= レイアウトのためのCSS ===============*/
/*body{
    vertical-align:middle; 
    padding: 100px 0;
    text-align: center;
}

p{
    margin: 0 0 10px 0;
}*/