按钮中的颜色仅显示在按钮的一半上

Question

我正在尝试创建一个按钮，但样式显示不正确。我正在尝试将颜色设置为蓝色，但它只显示在按钮的一半上：

按钮代码：

<asp:Button CssClass="button" ID="btnLogin2" runat="server" Text="Login" OnClick="btnLogin_Click" />

CSS代码：

<style>
        .button {
          padding: 10px 20px;
          font-size: 20px;
          text-align: center;
          cursor: pointer;
          outline: none;
          color: #fff;
          background-color: #4db8ff;
          border: none;
          border-radius: 15px;
          box-shadow: 0 9px #999;
        }

        .button:hover {background-color: #1aa3ff}

        .button:active {
          background-color: #1aa3ff;
          box-shadow: 0 5px #666;
          transform: translateY(4px);
        }
</style>

如果我不使用asp:Button，按钮样式可以正常工作 即<button class="button">Log in</button>看起来像这样：

如何让样式在asp按钮上工作？