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

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

    This gets into the details of the css a bit more too, and gives you some images:

    http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

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

    Simple button css now you can play around with your editor

    a {
      display: inline-block;
      background: #000000c9;
      color: #000;
      padding: 12px 24px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
    }
    a:hover {
      background:#000
      cursor: pointer;
      transition: 0.3s ease-in;
    }
    

    Link tag

    <a href="#">Hover me<a>
    
    0 讨论(0)
  • 2020-11-22 14:30

    Apply this class to it

    .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:34

    Why not just wrap an anchor tag around a button element.

    <a href="somepage.html"><button type="button">Text of Some Page</button></a>
    

    This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.

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

    Much belated answer:

    I've been wrestling with this on and off since I first started working in ASP. Here's the best I've come up with:

    Concept: I create a custom control that has a tag. Then in the button I put an onclick event that sets document.location to the desired value with JavaScript.

    I called the control ButtonLink, so that I could easily get if confused with LinkButton.

    aspx:

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>
    
    <asp:Button runat="server" ID="button"/>
    

    code behind:

    Partial Class controls_ButtonLink
    Inherits System.Web.UI.UserControl
    
    Dim _url As String
    Dim _confirm As String
    
    Public Property NavigateUrl As String
        Get
            Return _url
        End Get
        Set(value As String)
            _url = value
            BuildJs()
        End Set
    End Property
    Public Property confirm As String
        Get
            Return _confirm
        End Get
        Set(value As String)
            _confirm = value
            BuildJs()
        End Set
    End Property
    Public Property Text As String
        Get
            Return button.Text
        End Get
        Set(value As String)
            button.Text = value
        End Set
    End Property
    Public Property enabled As Boolean
        Get
            Return button.Enabled
        End Get
        Set(value As Boolean)
            button.Enabled = value
        End Set
    End Property
    Public Property CssClass As String
        Get
            Return button.CssClass
        End Get
        Set(value As String)
            button.CssClass = value
        End Set
    End Property
    
    Sub BuildJs()
        ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
        ' But it's not that big a deal.
        If String.IsNullOrEmpty(_url) Then
            button.OnClientClick = Nothing
        ElseIf String.IsNullOrEmpty(_confirm) Then
            button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
        Else
            button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
        End If
    End Sub
    End Class
    

    Advantages of this scheme: It looks like a control. You write a single tag for it, <ButtonLink id="mybutton" navigateurl="blahblah"/>

    The resulting button is a "real" HTML button and so looks just like a real button. You don't have to try to simulate the look of a button with CSS and then struggle with different looks on different browsers.

    While the abilities are limited, you can easily extend it by adding more properties. It's likely that most properties would just have to "pass thru" to the underlying button, like I did for text, enabled and cssclass.

    If anybody's got a simpler, cleaner or otherwise better solution, I'd be happy to hear it. This is a pain, but it works.

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

    Use below snippet.

        .a{
      color: $brn-acc-clr;
      background-color: transparent;
      border-color: #888888;
    
      &:hover:active{
        outline: none;
        color: #888888;
        border-color: #888888;
      }
      &:fill{
        background-color: #888888;
        color: #fff;
        box-shadow: 0 3px 10px rgba(#888888, 0.5);
        &:hover:active{
          color: #fff;
        }
        &:hover:not(:disabled){
          transform: translateY(-2px);
          background-color: darken(#888888, 4);
        }
      }
    }
    
    0 讨论(0)
提交回复
热议问题