Expand width of circle

Question

I'm pretty new to CSS3 animations to I'd like to know you how to do the following one: I have a circe:

On hover, I'd like to expand the width of the circle making it into a pill shape with a transition like in this image:

This is what I tried. The issue is that the circle transitions to an ellipse as the width expands :

.logo {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: width 2s;
}

.logo:hover {
  width: 300px;
}

<div class="logo"></div>

Answer 1

You just need to change the border-radius value to any other unit than percentage (all units listed here). For an explanation of how this works and why you need to use these units for the desired output, see Border-radius in percentage (%) vs pixels (px).

Example with px. The circle expands to a pill shape on hover :

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}

<div class="logo"></div>

If you don't know the height of the circle, you can set a very high value so the circle keeps its pill shape as the width expands :

.logo {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 400px;
}

<div class="logo"></div>