css - pagina - ¿Cómo hago para que un enlace html parezca un botón?

hipervinculos en html ejemplos

Question

Estoy usando ASP.NET, algunos de mis botones solo redirigen. Preferiría que fueran enlaces comunes, pero no quiero que mis usuarios noten mucha diferencia en la apariencia. Consideré imágenes envueltas por anclas, es decir, etiquetas, pero no quiero tener que iniciar un editor de imágenes cada vez que cambio el texto de un botón.

Answer 1

¿Qué hay de usar asp: LinkButton?

Puedes hacer eso: hice que un botón de enlace se vea como un botón estándar, usando la entrada de TStamper. Sin embargo, el subrayado se mostraba debajo del texto cuando flotaba, a pesar de la configuración de text-decoration: none .

Pude detener el subrayado del cursor al agregar style="text-decoration: none" dentro del botón de enlace:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>

Answer 2

¿Qué hay de usar asp:LinkButton ?

Answer 3

Aplicar esta clase a ella

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

Answer 4

Como dijo TStamper, puedes aplicarle la clase CSS y diseñarlo de esa manera. A medida que CSS mejora, la cantidad de cosas que puede hacer con los enlaces se ha vuelto extraordinaria, y ahora hay grupos de diseño que solo se enfocan en crear botones CSS de aspecto sorprendente para los temas, y así sucesivamente.

Por ejemplo, puede realizar transiciones con color de fondo utilizando la propiedad -webkit-transition y pseduo-classes. Algunos de estos diseños pueden volverse bastante chiflados, pero ofrecen una alternativa fantástica a lo que en el pasado se tuvo que haber hecho con, por ejemplo, flash.

Por ejemplo (estos son alucinantes en mi opinión), http://tympanus.net/Development/CreativeButtons/ (esta es una serie de animaciones totalmente listas para usar con botones, con código fuente en la página de origen ) http://www.commentredirect.com/make-awesome-flat-buttons-css/ (en la misma línea, estos botones tienen efectos de transición agradables pero minimalistas, y hacen uso del nuevo estilo de diseño "plano").

Answer 5

En mi humilde opinión, hay una solución mejor y más elegante. Si tu enlace es este:

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

El botón correspondiente debería ser este:

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

Este enfoque es más simple porque usa elementos html simples, por lo que funcionará en todos los navegadores sin cambiar nada. Además, si tiene estilos para sus botones, esta solución aplicará los mismos estilos a su nuevo botón de forma gratuita.

Answer 6

Esto es lo que usé El botón de enlace es

<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;
}

Answer 7

Esto funcionó para mí. Parece un botón y se comporta como un enlace. Puede marcarlo como favorito, por ejemplo.

<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>

Answer 8

Esto también entra en los detalles del CSS un poco más, y le da algunas imágenes:

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

Answer 9

La propiedad de appearance CSS3 proporciona una forma sencilla de aplicar estilo a cualquier elemento (incluido un anclaje) con los estilos integrados de <button> :

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

<body>
  <a class="btn">CSS Button</a>
</body>

CSS Tricks tiene un buen esquema con más detalles sobre esto. Tenga en cuenta que ninguna versión de Internet Explorer actualmente admite esto de acuerdo con caniuse.com .

Answer 10

Mucho respuesta tardía:

He estado luchando con esto de vez en cuando desde que comencé a trabajar en ASP. Aquí está lo mejor que he encontrado:

Concepto: creo un control personalizado que tiene una etiqueta. Luego, en el botón pongo un evento onclick que establece document.location en el valor deseado con JavaScript.

Llamé al control ButtonLink, por lo que podría confundirse fácilmente con LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

código detrás:

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

Ventajas de este esquema: parece un control. Usted escribe una sola etiqueta para ello, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

El botón resultante es un botón HTML "real" y parece un botón real. No tiene que intentar simular el aspecto de un botón con CSS y luego luchar con diferentes apariencias en diferentes navegadores.

Si bien las habilidades son limitadas, puede ampliarlas agregando más propiedades. Es probable que la mayoría de las propiedades simplemente tengan que "pasar" al botón subyacente, como lo hice para el texto, habilitado y cssclass.

Si alguien tiene una solución más simple, más limpia o, por lo demás, mejor, estaría feliz de escucharla. Esto es un dolor, pero funciona.

Answer 11

Puede crear un botón estándar y luego usarlo como imagen de fondo para un enlace. Luego puede establecer el texto en el enlace sin cambiar la imagen.

Las mejores soluciones si no tiene un botón prestado especial son las dos ya dadas por TStamper y Ólafur Waage.

Answer 12

Puedes hacerlo con JavaScript:

1. Obtenga estilos CSS de botón real con getComputedStyle(realButton) .
2. Aplica los estilos a todos tus enlaces.

/* 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>

Answer 13

Si quieres un bonito botón con esquinas redondeadas, utiliza esta clase:

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

Answer 14

Tan tonto como creo que es esto, voy a publicar esta antigua pregunta.

¿Por qué no simplemente envolver una etiqueta de anclaje alrededor de un elemento de botón?

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

Después de leer esta publicación y probar la respuesta aceptada sin el resultado deseado que estaba buscando, probé lo anterior y obtuve exactamente lo que quería.

NOTA

Esto solo funcionará para IE9 +, Chrome, Safari, Firefox y probablemente Opera.

Answer 15

Usa esta clase Hará que su enlace se vea igual que un botón cuando se aplique utilizando la clase de button en a etiqueta a.

AQUÍ ESTÁ LA JSFIDDLE DEMO

o

AQUÍ HAY OTRA JSFIDDLE DEMO

.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;
}

Answer 16

Yo uso un asp:Button :

<asp:Button runat="server"
            OnClientClick="return location=''targetPage'', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

De esta manera, la operación del botón es completamente del lado del cliente y el botón actúa como un enlace a la página de targetPage .

Answer 17

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

Answer 18

a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Puedes jugar con etiquetas <a> como esta si les das una visualización de bloque. Puede ajustar el borde para dar un efecto de color y el color de fondo para ese botón se siente :)