I have this fiddle: <https://jsfiddle.net/repoo0fz/>
I have this css code:

```
.menubutton{
     height:90px;
     width:180px;
     border-radius: 180px 180px 0 0;
     -moz-border-radius: 180px 180px 0 0;
     -webkit-border-radius: 180px 180px 0 0;
    float:left;
padding:0px;
margin-left:5px;
margin-bottom:0px;
font-family:courier new;
font-size:20px;
    -webkit-transition: height 0.5s; /* Safari */
    -webkit-transition-delay: 0s; /* Safari */
    transition: height 0.5s;
    transition-delay: 0s;
    line-height: 90px; 
    text-align:center;
    border: 1px solid white;
}
.menubutton:hover{
     height:180px;
     border-radius: 180px 180px;
     -moz-border-radius: 180px 180px;
     -webkit-border-radius: 180px 180px;
}

```

But the transformation is not as i want to. It looks weird when it is going from a half circle to a complete circle. It does not expand from a half circle but more from a oval one. I just want the last half of the circle.
What can i do?