将 HTML 转换为 aspx 页面的问题，因为 web 表单中的按钮不起作用

Question

此表单（左侧）的 HTML 代码如下所示。

                    <div class="lp-element lp-pom-form" id="lp-pom-form-410">
                        <form action="#" method="POST">

                                <div class="lp-pom-form-field clearfix" id="container_name">
                                    <input type="text" id="name" name="name" class="text form_elem_name" placeholder="Name">
                                </div>

                                <div class="lp-pom-form-field clearfix" id="container_email">
                                    <input type="text" id="email" name="email" class="text form_elem_email" placeholder="Email">
                                </div>



                        </form>
                        <a class="lp-element lp-pom-button" id="lp-pom-button-411" href="#"><span class="label">GET MY DEMO</span></a>
                    </div>

我正在尝试将其转换为 aspx 并将其后端代码转换为如下所示的 vb.net。

                      <form id="form1" runat="server">

                            <asp:Panel runat="server" ID="uxForm">

                                <div class="lp-pom-form-field clearfix" id="container_name">

                                      <asp:TextBox ID="uxName" runat="server"  CssClass="text form_elem_name" placeholder="Name"    />

                                </div>
                                <div class="lp-pom-form-field clearfix" id="container_email">

                                    <asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email"  />
                                </div>


                        </asp:Panel>

                        </form>

问题是我无法将获取我的演示按钮转换为 asp 按钮。

我尝试了以下方法：

<asp:LinkButton runat="server" ID="btnSave" CssClass="lp-element lp-pom-button"   Text="Get My Demo" />

但它就像图片一样变得不可见（右侧形式）

我也试过了

    <a class="lp-element lp-pom-button" id="save" runat="server"><span class="label">GET MY DEMO</span></a>

但是按钮也变得不可见，并且我的演示的文本位于名称字段中，如第二张图片所示。

出了什么问题，我该如何纠正？ 按钮不可见..即使没有 css 类

为了您的信息，我还没有创建 vb.net 代码。会不会是这个问题？

---

CSS

#lp-pom-button-411 {
  display:block;
  border-style:none;
  behavior:url(/PIE.htc);
  border-radius:9px;
  left:0px;
  top:251px;
  z-index:16;
  width:348px;
  height:50px;
  position:absolute;
  background-color:#f7941d;
  background:-webkit-linear-gradient(#fd494b,#fb2c2f);
  background:-moz-linear-gradient(#fd494b,#fb2c2f);
  background:-ms-linear-gradient(#fd494b,#fb2c2f);
  background:-o-linear-gradient(#fd494b,#fb2c2f);
  background:linear-gradient(#fd494b,#fb2c2f);
  box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
  text-shadow:1px 1px #7a0404;
  -pie-background:linear-gradient(#fd494b,#fb2c2f);
  color:#fff;
  border-width:undefinedpx;
  border-color:#undefined;
  font-size:25px;
  line-height:30px;
  font-weight:bold;
  font-family:Raleway;
  text-align:center;
  background-repeat:no-repeat;
}


  .button{
    display: inline-block;
    padding: 17px 34px;
    border: 3px solid #fff;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    height: 52px;
    width: 123px;
    font-family: 'Lato', sans-serif;
    background: red;
    background: -webkit-linear-gradient(#fe4d4f, #fb2d2e);
    background: -o-linear-gradient(#fe4d4f, #fb2d2e);
    background: -moz-linear-gradient(#fe4d4f, #fb2d2e);
    background: linear-gradient(#fe4d4f, #fb2d2e);
    margin-left: 49px;
    text-shadow: #000000 1px 0px 1px;
  }
  .button:hover{
    background: red;
    background: -webkit-linear-gradient(#f13839, #ee2526);
    background: -o-linear-gradient(#f13839, #ee2526);
    background: -moz-linear-gradient(#f13839, #ee2526);
    background: linear-gradient(#f13839, #ee2526);
  }

图 3

Answer 1

试试这个：

<asp:LinkButton runat="server" ID="btnGetDemo" CssClass="lp-element lp-pom-button lp-pom-button-411"><span class="label">GET MY DEMO</span></asp:LinkButton> 

我的猜测是跨度上的“标签”类与它有关。

编辑： 我稍微更改了 LinkBut​​ton 标记并将 CSS 更改为：

.lp-pom-button-411 {
 display:block;
 border-style:none;
 behavior:url(/PIE.htc);
 border-radius:9px;
 left:0px;
 top:251px;
 z-index:16;
 width:348px;
 height:50px;
 position:absolute;
 background-color:#f7941d;
 background:-webkit-linear-gradient(#fd494b,#fb2c2f);
 background:-moz-linear-gradient(#fd494b,#fb2c2f);
 background:-ms-linear-gradient(#fd494b,#fb2c2f);
 background:-o-linear-gradient(#fd494b,#fb2c2f);
 background:linear-gradient(#fd494b,#fb2c2f);
 box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
 text-shadow:1px 1px #7a0404;
 -pie-background:linear-gradient(#fd494b,#fb2c2f);
 color:#fff;
 border-width:undefinedpx;
 border-color:#undefined;
 font-size:25px;
 line-height:30px;
 font-weight:bold;
 font-family:Raleway;
 text-align:center;
 background-repeat:no-repeat;
}

Answer 2

你不是创建按钮事件，像这样创建按钮事件并尝试：

<asp:button id="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" onclick="btnSave_Click">

Answer 3

使用这个：

<form id="form1" runat="server">
    <asp:Panel runat="server" ID="uxForm">
        <div class="lp-pom-form-field clearfix" id="container_name">
            <asp:TextBox ID="uxName" runat="server" CssClass="text form_elem_name" placeholder="Name" />

        </div>
        <div class="lp-pom-form-field clearfix" id="container_email">

            <asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email" />
        </div>

        <asp:Button ID="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" />

    </asp:Panel>


</form>