html
<a href="#" class="btn03 pushdown"><span>7-1-15 下に押し込まれる（立体が平面に）</span></a>
css
/* ボタン共通設定 */
.btn03 {
/*影の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
text-decoration: none;
display: inline-block;
text-align: center;
background: transparent;
border-radius: 25px;
border: solid 1px #333;
outline: none;
/*アニメーションの指定*/
transition: all 0.2s ease;
}
/*hoverをした後のボタンの形状*/
.btn03:hover {
border-color: transparent;
}
/*ボタンの中のテキスト*/
.btn03 span {
position: relative;
z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
/*テキストの形状*/
display: block;
padding: 10px 30px;
background: #fff;
border-radius: 25px;
color: #333;
/*アニメーションの指定*/
transition: all 0.3s ease;
}
/*== 下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushdown:before {
content: "";
/*絶対配置で影の位置を決める*/
position: absolute;
z-index: -1;
top: 4px;
left: 0;
/*影の形状*/
width: 100%;
height: 100%;
border-radius: 25px;
background-color: #333;
}
/*hoverの際にY軸に4pxずらす*/
.pushdown:hover span {
background-color: #333;
color: #fff;
transform: translateY(4px);
}
/*========= レイアウトのための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-15/