HTML、CSSのみで円の中に上下左右向きのボタンを作成する方法

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class ='circleBase' id='rotateMode'>

<button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>

<button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>

<button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>

<button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>

</div>

#rotateMode{
border-radius: 50%;
width: 125px;
height: 125px;
background-color: gray;
color:white;
position:absolute;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
align-content:center;

}

#left{

}

#right{

}

#up{
margin:0 100px;
}

#down{
margin:0 100px;
}