CSS

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1-14.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="pushcircle">7-1-14</a>

 
CSSの書き方

/*== 押し込む円 */
.pushcircle{
	/*周囲の線の起点とするためrelativeを指定*/
	position: relative;

	/*円の形状*/
	width:100px;
	height:100px;
	box-sizing: border-box;
	padding: 0 10px;
	text-align: center;
	background:#333;
	border-radius:50%;
	color: #fff;
	text-decoration: none;
	outline: none;

	/*天地中央にテキストを配置*/
	display: flex;
	align-items: center;
	justify-content: center;
}

/*内側の線*/
.pushcircle:after {
	content: "";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	top: 50%;
	left: 50%;

	/*線の形状*/
	width: 85%;
	height: 85%;
	border: 2px solid #333;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1.1);

	/*アニメーションの指定*/
	transition: .3s ease; 
}

/*hoverをしたら枠線が小さくなる*/
.pushcircle:hover:after {
	transform: translate(-50%, -50%) scale(1);
	border-color:#fff;
}