Expand div from center

Question

I'm trying to make a circle div expandable like google material design but something does not work. I want it to expand and fill the page (from top 0 and right 0) and stay in position. But when width and height increase, the center of div moves.

I want the same effect on search button on this template (ThemeForest): https://html.nkdev.info/_con/dashboard.html

Here my code :

$('.expand').on('click', function() {
  $('.to-expand').css({
    'width': '300px',
    'height': '300px'
  })
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>

Answer 1

Maybe you are looking from scale:

$('.expand').on('click', function() {
  $('.to-expand').addClass('scale');
})

html,
body {
  width: 100%;
  height: 100%;
}

.to-expand {
  position: absolute;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
  right: 0;
  transition: .5s;
}
.scale {
  transform:scale(15);
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a class="expand">expand</a>
<div class="to-expand"></div>