How do I make an html link look like a button?

后端 未结 22 770
执笔经年
执笔经年 2020-11-22 14:03

I\'m using ASP.NET, some of my buttons just do redirects. I\'d rather they were ordinary links, but I don\'t want my users to notice much difference in the appearance. I c

相关标签:
22条回答
  • 2020-11-22 14:54

    IMHO, there is a better and more elegant solution. If your link is this:

    <a href="http://www.example.com">Click me!!!</a>
    

    The corresponding button should be this:

    <form method="GET" action="http://www.example.com">
    <input type="submit" value="Click me!!!">
    </form>
    

    This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.

    0 讨论(0)
  • 2020-11-22 14:55

    How about using asp:LinkButton?

    You can do that - I made a linkbutton look like a standard button, using TStamper's entry. Underlining showed under the text when I hovered, though, in spite of the text-decoration: none setting.

    I was able to stop the hover-underlining by adding style="text-decoration: none" within the linkbutton:

    <asp:LinkButton 
    id="btnUpdate" 
    CssClass="btnStyleTStamper" 
    style="text-decoration: none" 
    Text="Update Items"   
    Onclick="UpdateGrid"  
    runat="server"
    />
    
    0 讨论(0)
  • 2020-11-22 14:56

    The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:

    a.btn {
      -webkit-appearance: button;
      -moz-appearance: button;
      appearance: button;
    }
    <body>
      <a class="btn">CSS Button</a>
    </body>

    CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.

    0 讨论(0)
  • 2020-11-22 14:56

    Use this class. It will make your link look the same as a button when applied using the button class on an a tag.

    or

    HERE IS ANOTHER DEMO JSFIDDLE

    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        border: solid 1px #da7c0c;
        background: #478dad;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em; 
        -moz-border-radius: .5em;
        border-radius: .3em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .button:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .button:active {
        position: relative;
        top: 1px;
    }
    
    0 讨论(0)
提交回复
热议问题