jqueryでボタンを作ろう2

jQueryの問題に挑戦しよう！

問題

「jqueryでボタンを作ろう2」

今回は前回（jqueryでボタンを作ろう1）の応用問題です。デモのようにマウスが入ってきたところを中心に円が広がり、出たところを中心に円が縮小するようなアニメーションを作ってみましょう！

あらかじめエディタに書くコード

                    <div class="btn">ここをクリック<span></span></div>
¥HTML¥

                    .btn{
  position: relative;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  border: 2px solid black;
  overflow: hidden;
}
.btn span{
  position: absolute;
  background-color: #bbbbbb;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: .3;
}
¥CSS¥