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

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, tags, pero no quiero tener que iniciar un editor de imágenes cada vez que cambio el texto de un botón.

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

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?

  

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.

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

 Click me!!! 

El botón correspondiente debería ser este:

 

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.

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

Puedes jugar con tags 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 🙂

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

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

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

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

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.

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/

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

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,

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.

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. 
  

Button Styled Links

first second

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

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

  

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

  

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

Yo uso un asp:Button :

  

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 .

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

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

¿Qué hay de usar asp: LinkButton ?