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

后端 未结 22 756
执笔经年
执笔经年 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:45

    This worked for me. It looks like a button and behaves like a link. You can bookmark it for example.

    <a href="mypage.aspx?param1=1" style="text-decoration:none;">
        <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
    </a>
    
    0 讨论(0)
  • 2020-11-22 14:47

    You may do it with JavaScript:

    1. Get CSS styles of real button with getComputedStyle(realButton).
    2. Apply the styles to all your links.

    /* javascript, after body is loaded */
    'use strict';
    
    { // Namespace starts (to avoid polluting root namespace).
      
      const btnCssText = window.getComputedStyle(
        document.querySelector('.used-for-btn-css-class')
      ).cssText;
      document.querySelectorAll('.btn').forEach(
        (btn) => {
          
          const _d = btn.style.display; // Hidden buttons should stay hidden.
          btn.style.cssText = btnCssText;
          btn.style.display = _d;
          
        }
      );
      
    } // Namespace ends.
    <body>
      <h3>Button Styled Links</h3>
      <button class="used-for-btn-css-class" style="display: none"></button>
      <a href="//github.io" class="btn">first</a>
      <a href="//github.io" class="btn">second</a>
      <button>real button</button>
      <script>/* You may put JS here. */</script>
    </body>

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

    .button {
      font: bold 11px Arial;
      text-decoration: none;
      background-color: #EEEEEE;
      color: #333333;
      padding: 2px 6px 2px 6px;
      border-top: 1px solid #CCCCCC;
      border-right: 1px solid #333333;
      border-bottom: 1px solid #333333;
      border-left: 1px solid #CCCCCC;
    }
    <a href="#" class="button">Example</a>

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

    If you want nice button with rounded corners, then use this class:

    .link_button {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: solid 1px #20538D;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        background: #4479BA;
        color: #FFF;
        padding: 8px 12px;
        text-decoration: none;
    }
    <a href="#" class="link_button">Example</a>

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

    As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth.

    For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash.

    For example (these are mind-blowing in my opinion), http://tympanus.net/Development/CreativeButtons/ (this is a series of totally out-of-the-box animations for buttons, with source code on the originating page). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)

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

    This is what I used. Link button is

    <div class="link-button"><a href="/">Example</a></div>
    

    CSS

    /* body is sans-serif */ 
    
    .link-button {
        margin-top:15px;
        max-width:90px;
        background-color:#eee;
        border-color:#888888;
        color:#333;
        display:inline-block;
        vertical-align:middle;
        text-align:center;
        text-decoration:none;
        align-items:flex-start;
        cursor:default;
        -webkit-appearence: push-button;
        border-style: solid;
        border-width: 1px;
        border-radius: 5px;
        font-size: 1em;
        font-family: inherit;
        border-color: #000;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        min-height: 30px;
    }
    
    .link-button a {
        margin-top:4px;
        display:inline-block;
        text-decoration:none;
        color:#333;
    }
    
    .link-button:hover {
        background-color:#888;
    }
    
    .link-button:active {
        background-color:#333;
    }
    
    .link-button:hover a, .link-button:active a {
        color:#fff;
    }
    
    0 讨论(0)
提交回复
热议问题