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

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

 

buttons in circle

 

▼完成デモ

https://jsfiddle.net/wncv4h0s/5/

 

▼HTML

<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>

▼CSS

#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;}