CSS

html

<a href="#" class="btnripple3">7-1-13 波紋がふわっと広がる</a>

css

.btnripple3 {
	/*波紋の基点とするためrelativeを指定*/
	position: relative;
	
	/*リンクの形状*/
	display: inline-block;
	margin: 0 10px 20px 10px;
	text-decoration: none;
	color: #333;
	outline: none;
}

/*波形の設定*/
.btnripple3:hover::before {
	content: '';
	
	/*絶対配置で波形の位置を決める*/
	position: absolute;
	left: 30%;
	top: 0;
	
	/*波形の形状*/
	border: 1px solid #333;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	
	/*はじめは不透明*/
	opacity: 1;
	
	/*アニメーションの設定*/
	animation: 1s circleanime2 forwards;
}

/*波形が広がるアニメーション*/
@keyframes circleanime2 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/*矢印の設定*/
.btnripple3::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 30%;
	right: -20px;
	
	/*矢印の形状*/
	width: 5px;
	height: 5px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
}


/*========= レイアウトのためのCSS ===============*/

body {
	vertical-align: middle;
	padding: 100px 0;
	text-align: center;
}

p {
	margin: 0 0 10px 0;
}

引用元：https://coco-factory.jp/ugokuweb/move01/7-1-13/