Problem with CSS and ASP Button

Asked

Viewed 307 times

1

I’m trying to put a button ASP with a certain class CSS but I’m not getting the button ASP operating in accordance with CSS.

If the button is HTML goes without a problem.

CSS code:

.images_1_of_5 .button{
    margin-top:.3em;
    line-height:1.9em;
}
.images_1_of_5 .button a{
        padding: 8px 10px;
        display: inline-block;
        background: url(../images/button3.gif) left top repeat-x;
        border: none;
        font: bold 12px "Arial"!important;
        color: #fff;
        text-align: center;
        cursor: pointer;
        -moz-transition: background 0.5s ease;
        -o-transition: background 0.5s ease;
        -webkit-transition: background 0.5s ease;
}
.images_1_of_5 .button a:hover{
      background-position: left bottom;
    text-decoration: none !important;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
}

HTML code with ASP button:

<div class="grid_1_of_5 images_1_of_5">
<div class="button">
<a><asp:Button ID="Button1" runat="server" Text="Button" /></a></div>

No ASP button:

<div class="grid_1_of_5 images_1_of_5">
<div class="button"><span><a href="singlepage.html">Ver Detalhes</a></span></div>
html css asp.net asp

  • And if you use cssClass right on the button and create a specific class ?

  • I tried, but I couldn’t, I might be doing something wrong, I could exemplify?

1 answer

1


Try it like this:

<asp:LinkButton ID="idButton" runat="server" CssClass="classButton" CausesValidation="False" Text="Button" />

.classButton{
        padding: 8px 10px;
        display: inline-block;
        background: url(../images/button3.gif) left top repeat-x;
        border: none;
        font: bold 12px "Arial"!important;
        color: #fff;
        text-align: center;
        cursor: pointer;
        -moz-transition: background 0.5s ease;
        -o-transition: background 0.5s ease;
        -webkit-transition: background 0.5s ease;
}

.classButton:hover{
      background-position: left bottom;
    text-decoration: none !important;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
}

Note that I changed your syntax Asp:Button for Asp:Linkbutton.

Browser other questions tagged html css asp.net asp

You are not signed in. Login or sign up in order to post.