¿Cómo hago que un enlace html parezca un botón?

154

Estoy usando ASP.NET, algunos de mis botones solo redirigen. Prefiero que sean enlaces comunes, pero no quiero que mis usuarios noten mucha diferencia en la apariencia. Considere las imágenes envueltas en anclas, es decir, etiquetas, pero no quiero tener que encender un editor de imágenes cada vez que cambio el texto en un botón.

css  button 
— MatthewMartin
fuente
2
Vea la respuesta que acepté para esta pregunta: stackoverflow.com/questions/547222/…
— tvanfosson
Puede usar un servicio como este para generar el CSS por usted después de configurar algunos aspectos (color, tamaño, fuente).
— Basil Bourque
1
Yo respondería cómo hacerlo con javascript pero la pregunta no tiene etiqueta "javascript"
— ilyaigpetrov
2
@ilyaigpetrov adelante y publique una respuesta. Pregunté esta pregunta hace 7 años y parece que es un problema común y la gente ha estado necesitando una variedad de soluciones.
— MatthewMartin

Respuestas:

213

Aplica 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>
Expandir fragmento

— TStamper
fuente
13
El problema con esto es que requiere que reproduzcas la apariencia de un botón con CSS. Pero desafortunadamente, los botones en diferentes navegadores y diferentes versiones de navegadores se ven diferentes. Por lo tanto, debe aceptar que se vea divertido en algunos navegadores, o tener un montón de código para descubrir qué navegador y qué versión tiene el usuario y elegir un estilo diferente. Lo cual es un gran problema y podría romperse la próxima vez que salga una nueva versión de un navegador.
— Jay
Esto solo funciona para mí si lo aplico a la aetiqueta directamente ( a {display: block ...}), lo cual no es aceptable. ¿Tienes alguna idea de por qué el classatributo dentro de la aetiqueta no funcionará? :( Estoy usando Firefox 27. También lo intenté a.button {...}y tampoco funciona.
— just_a_girl
1
@Jay un compromiso podría ser definir el estilo de los elementos <input type="submit">y / o <button>elementos para que no usen los valores predeterminados del navegador (cuando sea posible), y luego combinarlos con el estilo de la .buttonforma anterior. Esto debería ayudar a reducir las diferencias, si no eliminarlas por completo, y es mejor que su método (poco confiable, como bien dice) de detectar el tipo y la versión del navegador.
— Ollie Bennett
@OllieBennett Verdadero: podría redefinir completamente el aspecto de un botón. No he intentado hacer esto, no estoy seguro de cuántos aspectos del estilo tiene que anular. Suena como un dolor, pero al no haberlo probado, no puedo decir cuánto dolor es en comparación con otras opciones.
— Jay
@CraigGjerdingen Me gustan mucho los estilos que usaste para .link_button. El uso de CSS3 definitivamente actualiza esta respuesta. El uso de estilos que son menos parecidos a los botones "normales" del navegador, pero que todavía tienen un botón asequible, resuelve el problema del rastreo del navegador sin (imo) tener que redefinir también los estilos para<input type="submit">
— Evan Donovan
128

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

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

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

— guanome
fuente
8
@Dean_Wilson intenta tener que atender ie6 :(
— Robotnik
@feeel Porque fue más fácil para mí obtener un botón de aspecto consistente. Si usa CSS, no tendrá un estilo nativo. Alguien más ya tenía esa respuesta de todos modos.
— guanome
1
Me gusta esta solución, ya que no tienes que jugar con CSS tratando de imitar el estilo del botón del navegador nativo. Sin embargo, en Firefox lo conseguí trabajando solo con <button type="button">. Sin el atributo type, siempre haría una devolución de datos e ignoraría el enlace.
— Tobias
@Pyitoechito Estoy seguro de que lo haría ya que Chrome y Safari están en el kit web. Parece que será jsfiddle.net/9Gt7y
— guanome
31
Anidar <botón> y <a> no es HTML válido y tiene un comportamiento indefinido. Vea la respuesta detallada aquí stackoverflow.com/questions/6393827/… Si funciona, es solo una coincidencia.
— Odin
36

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

— Raul Luna
fuente
55
Bien, probé esto hoy ... y ... funciona muy bien si no estás usando formularios web ASP.NET. Los formularios web ASP.NET envuelven toda la página en una etiqueta de formulario y los formularios anidados no parecen funcionar en absoluto; funciona fuera de la etiqueta de formulario ASP.NET, pero eso limita el uso de enlaces en la parte superior e inferior.
— MatthewMartin
3
Simple y efectivo. Es posible que desee agregar display: estilo en línea al elemento del formulario. De lo contrario, se trata como un bloque que es diferente del botón / ancla / entrada.
— nimrodm
Buena pregunta. Yo tampoco lo creo. Pero otras soluciones representadas aquí no funcionarán con googlebot, por ejemplo, las de usar una etiqueta de botón.
— Raul Luna
Intenté esto en Django, pero a medida que el botón termina en otra forma, PUBLICA los datos en lugar de actuar como un enlace.
— wobbily_col
1
También puede hacer que el botón redirija en JavaScript. pero ahora no es un enlace: no se puede "copiar la dirección del enlace al portapapeles", hacer clic con el botón central para abrir en una nueva pestaña, etc., previsualizar el destino del enlace pasando el mouse sobre él, etc.
— Alexander Taylor
27

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

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

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 .

— Kevin Leary
fuente
55
Esto se eliminó de la especificación CSS3. htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Puedes jugar con <a>etiquetas como esta si les das una pantalla bloqueada. Puede ajustar el borde para dar un efecto de sombra y el color de fondo para esa sensación de botón :)

— Ólafur Waage
fuente
18

Si quieres un buen botón con esquinas redondeadas, usa 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>
Expandir fragmento

— Rupray
fuente
3
Agregué esto y la respuesta de rango más alto a un jsFiddle. Siéntase libre de jugar
— Craig Gjerdingen el
Es posible que desee agregarle margintambién. De lo contrario, buen trabajo de diseño.
— c00000fd
3

Como dijo TStamper, solo puede aplicarle la clase CSS y diseñarla 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 centran en crear botones CSS de aspecto increíble para 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 locos, pero proporciona una alternativa fantástica a lo que en el pasado podría haberse tenido que hacer con, digamos, 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 para 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").

— graemeboy
fuente
3

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

— ilyaigpetrov
fuente
2

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

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

— cjk
fuente
2

Respuesta muy tardía:

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

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, para que pudiera obtenerlo fácilmente si me confundía 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 se parece a un botón real. No tiene que intentar simular la apariencia de un botón con CSS y luego luchar con diferentes apariencias en diferentes navegadores.

Si bien las habilidades son limitadas, puede ampliarlas fácilmente agregando más propiedades. Es probable que la mayoría de las propiedades solo tengan que "pasar" al botón subyacente, como hice para text, enabled y cssclass.

Si alguien tiene una solución más simple, limpia o mejor, me encantaría escucharla. Esto es un dolor, pero funciona.

— Arrendajo
fuente
2

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;
}
— Andrew Howden
fuente
Sin embargo, no se parece mucho a un botón. No sé quién te rechazó. Aquí está el violín JS para el código que proporcionó: jsfiddle.net/yajj2x0p
— MatthewMartin
2

¿Qué tal usar asp: LinkButton?

Puede hacer eso: hice que un botón de enlace pareciera un botón estándar, usando la entrada de TStamper. Sin embargo, a pesar deltext-decoration: none entorno, .

Pude detener el subrayado style="text-decoration: none"flotante agregando dentro del botón de enlace:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— cristiano
fuente
Linkbutton crea algo que parece un enlace pero actúa como un botón. La pregunta pide lo contrario: algo que parece un botón pero actúa como un enlace.
— Jay
2

Al usar las propiedades de borde, color y color de fondo, puede crear un enlace html similar a un botón.

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Expandir fragmento

Espero que esto ayude :]

— Sree Ramana
fuente
2

Usa esta clase . Hará que su enlace se vea igual que un botón cuando se aplica usando la buttonclase en una etiqueta.

o

AQUÍ ESTÁ OTRA 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;
}
— Muhammad Ashikuzzaman
fuente
1

Yo uso un asp:Button:

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

De esta manera, el funcionamiento del botón es completamente del lado del cliente y el botón actúa como un enlace al targetPage.

— Manus Hand
fuente
¡Buen trabajo mostrando cómo se asp:Buttonve en la práctica, por lo que puede ayudar a otros usuarios!
— Usuario que no es un usuario
0 

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

0

Usar debajo del fragmento.

    .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);
    }
  }
}
— Himadri Mandal
fuente
0

Botón simple css ahora puedes jugar con tu 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;
}

Etiqueta de enlace

<a href="#">Hover me<a>
— codeuix
fuente
-1

Esto funcionó para mí. Parece un botón y se comporta como un enlace. Puedes marcarlo 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>
— Andrej Adamenko
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.