2

Query:

How can I keep the 'after' part of the code working when I change the html button to an ASP button. I'm not sure why it drops?

Issue:

When I change <button to <asp:button the after part of the CSS no longer works. The part of the code that fails is #course .bottom .btn-next:after

Code:

#course .bottom .next {
    padding-right: 40px;
}
#course .bottom .btn-next {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#course .bottom .btn-next:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #ffffff;
    border-width: 20px;
    margin-top: -20px;
}

Research example:

Is it possible to have a :after pseudo element on a button? (relates to html not .NET button)

Community
  • 1
  • 1
indofraiser
  • 1,014
  • 3
  • 18
  • 50

2 Answers2

3

The problem is that an asp .net button renders and input with a type="submit".

You could render it as follows (please note without your markup I am taking a guess):

<button runat="server" id="btnId" class="btn btn-next">
    Dooz it
</button>

This will render it as a button tag but notice the runat="server" which makes it an HTML server control.

hutchonoid
  • 32,982
  • 15
  • 99
  • 104
  • That looks good, how can it then action something in the .NET? i.e. on the click go to Protected Sub btnNext_Click(sender As Object, e As EventArgs) Handles btnNext.Click on the .vb part of the code. (time for a new question?) – indofraiser Aug 19 '15 at 13:42
  • @indofraiser You can use `OnServerClick=` with the name of your method i.e. `OnServerClick=btn_Click`. – hutchonoid Aug 19 '15 at 14:24
0

I've currently used the following, now perfect but CSS and link works:

<a href="#" class="btn btn-next">
<asp:Button ID="btnNext" runat="server" CssClass="btn btn-next" Text="Next" /></a>
indofraiser
  • 1,014
  • 3
  • 18
  • 50