//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;
}
/*-//---------------------------------------------------*/