リンクボタンいろいろ

<a href="#" class="popupLink"><span>文字列にhoverすると背景が下からカラーチェンジ</span></a>

a.popupLink {
	position: relative;
	text-decoration: none;
	display: inline-block;
	color: #189d00;
	padding: .2rem .5rem;
	transition: color ease 0.3s;
	}
a.popupLink:after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 0%;
	left: 0;
	bottom: 0;
	background-color: #189d00;
	transition: all ease 0.3s;
	}
a.popupLink:hover {
	color: #fff;
	}
a.popupLink:hover:after {
	height: 100%;
	}

<a href="#" class="btn btn-flat"><span>PUSH！</span></a>

/*----------------------------------------------------*/
.btn,
a.btn {
	font-weight: 500;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;
	}

/*----------------------------------------------------*/
a.btn-flat {
	overflow: hidden;
	padding: 1.5rem 6rem;
	color: #fff;
	border-radius: 0;
	background: #00ced1;
	}

a.btn-flat span {
	position: relative;
	}

a.btn-flat:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	content: '';
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(-80%) translateY(-25px);
	transform: translateX(-80%) translateY(-25px);
	border-radius: 50%;
	background: #eb6100;
	}

a.btn-flat:hover:before {
	width: 400px;
	height: 400px;
	-webkit-transform: translateX(-1%) translateY(-175px);
	transform: translateX(-1%) translateY(-175px);
	}
/*-//---------------------------------------------------*/

//Head内 …メールアイコン表示用（Google Icon）
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

//Body内
<a href="#" class="btn btn-circle"><span class="material-symbols-outlined">mail</span><br>お問い合わせ<br>はコチラ</a>

/*----------------------------------------------------*/
.btn,
a.btn {
	font-weight: 500;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;
	}

/*----------------------------------------------------*/
a.btn-circle {
	width: 140px;
	height: 135px;
	padding:10px 0 10px;
	border-radius: 50%;
	color: #fff;
	line-height: 1.2;
	background: #eb6877;
	-webkit-box-shadow: 0 7px 0 #e53b4e;
	box-shadow: 0 3px 0 #e53b4e;
	}

a.btn-circle:before {
	content: '';
	position: absolute;
	bottom: 1.2rem;
	left: 45%;
	right: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: .3s;
	}
a.btn-circle:after {
	content: '';
	position: absolute;
	left: 45%;
	right: 50%;
	bottom: calc(1.2rem + 8px);
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: .3s;
	}

a.btn-circle:hover {
	-webkit-transform: translate(0, 4px);
	transform: translate(0, 4px);
	color: #fff;
	-webkit-box-shadow: 0 3px 0 #e53b4e;
	box-shadow: 0 3px 0 #e53b4e;
	}

a.btn-circle .material-symbols-outlined {
	font-size: 4rem;
	}
/*-//---------------------------------------------------*/