在表单中对齐三个按钮

我正在尝试将表单内的三个按钮对齐，但中央的按钮始终固定在底部。

jsfiddle 草图

---HTML---

<form action="view.php" method="GET">
    <button class="option delete-option" type="button"></button>
    <button class="btn" type="submit">59752fbd5f346</button>
    <button class="option edit-option" type="button"></button>
</form>

---CSS---

.btn {
    font-family: 'Arima Madurai', cursive;
    background-color: Transparent;
    color: black;
    cursor: pointer;
    font-size: 16px;
    max-width: 300px;
    position: relative;
    width: 100%;
    border: 1px solid;
    overflow: hidden;
}
.btn span {
    font-family: 'Arima Madurai', cursive;
}
.btn:after {
    background: red;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
}

.btn:hover:after {
    left: 120%;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.option{
    opacity: 0.5;
    transition: 200ms;
  width: 32px;
  height: 32px;
  border: 0;
  position: relative;
}

.option:hover{
  opacity: 1;
}

.delete-option{
  background: url("http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png") no-repeat scroll 0 0 transparent;
}
.edit-option{
  background: url("http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png") no-repeat scroll 0 0 transparent;
}

我还注意到从 Mozilla 打开页面时，中央按钮似乎固定在顶部。