cssで丸いボタンを作りました

<a href="#blog" class="btn-circle-flat-blopc">BLOG</a>

<a href="#works" class="btn-circle-flat-worpc">WORKS</a>

<a href="#profile" class="btn-circle-flat-propc">PROFILE</a>

<a href="#contact" class="btn-circle-flat-conpc">CONTACT</a>

.btn-circle-flat-consp:before,
.btn-circle-flat-conpc:before {
	content: "\f1d8";
}
.btn-circle-flat-worsp:before,
.btn-circle-flat-worpc:before {
	content: "\f249";
}
.btn-circle-flat-blosp:before,
.btn-circle-flat-blopc:before {
	content: "\f044";
}
.btn-circle-flat-prosp:before,
.btn-circle-flat-propc:before {
	content: "\f007";
}

.btn-circle-flat-consp,
.btn-circle-flat-prosp,
.btn-circle-flat-worsp,
.btn-circle-flat-blosp{
  display: block;
	margin:0 auto;
  text-decoration: none;
  background: var(--color_main);
  color: #FFF;
  width: 70px;
  height: 70px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
	font-size:9px;
}

.btn-circle-flat-conpc,
.btn-circle-flat-propc,
.btn-circle-flat-worpc,
.btn-circle-flat-blopc{
  display: block;
	margin:0 0 0 auto;
  text-decoration: none;
  background: var(--color_main);
  color: #FFF;
  width: 70px;
  height: 70px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  transition: .4s;
	font-size:9px;
}

.btn-circle-flat-consp:before,
.btn-circle-flat-conpc:before,
.btn-circle-flat-worsp:before,
.btn-circle-flat-worpc:before,
.btn-circle-flat-prosp:before,
.btn-circle-flat-propc:before,
.btn-circle-flat-blosp:before,
.btn-circle-flat-blopc:before{
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  display: block;
  line-height: 1;
	font-size:2em;
	margin-top:0.8em;
}

.btn-circle-flat-consp:hover,
.btn-circle-flat-conpc:hover,
.btn-circle-flat-worsp:hover,
.btn-circle-flat-worpc:hover,
.btn-circle-flat-prosp:hover,
.btn-circle-flat-propc:hover,
.btn-circle-flat-blosp:hover,
.btn-circle-flat-blopc:hover{
  background: #808080;
}