デモページ HTML <div id="btn"><a href="javascript:void(0);">button</a></div> CSS #btn { display: table; margin: 0 auto; width: 100px; height: 100px; } #btn a { position: relative; display: table-cell; color: #52d3ff; font-weight: bold; text-decoration: none; text-align: center; vertical-align: middle; } #btn a:after { position: absolute; left: 0; top: 0; border-radius: 50%; border: 5px solid #52d3ff; b
![マウスオーバーで円が広がるアニメーションのボタン | NAKAZI LAB.(ナカジラボ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7670ab4b244d67c5c8dfc965cc1274067562ff79/height=288;version=1;width=512/https%3A%2F%2Fnakazilab.com%2Fwp%2Fwp-content%2Fthemes%2Fnakazilab%2Fthumbnail%2Fthmb_mouse-over-circle-spread-button.png)