¿Cómo hacer que el botón parezca un enlace?

287

Necesito hacer que un botón se vea como un enlace usando CSS. Los cambios están hechos, pero cuando hago clic en él, se muestra como si estuviera presionado como en un botón. ¿Alguna idea de cómo eliminar eso, para que el botón funcione como un enlace incluso cuando se hace clic?

James Hibbard
fuente
44
eventos onclick en enlaces son tan simples como en los botones
knittl
2
@knittl, @cletus En realidad, los enlaces y botones tienen significados muy diferentes en HTML. Debería leer whatwg.org/specs/web-apps/current-work/multipage/… . Puede que no sea una buena idea diseñar un botón para que parezca un enlace, pero depende del diseño de la interfaz de usuario, mientras que el uso del enlace está en contra de las especificaciones HTML.
Anton Strogonoff
55
Hay algunas razones por las cuales puede ser necesario diseñar un botón como un enlace. (1) el botón tiene el botón type = "submit" (2) tiene un estilo elegante, es decir, imagen de fondo con longitud variable
TJ.
95
También puede ser más semánticamente correcto que algo sea un botón, incluso si desea que se vea como un enlace. Por ejemplo, imagine un par de enlaces "Expandir todo | Contraer todo" que cambian algo en la página. Al hacer clic en estos, se produce una acción, pero no lleva al usuario a ninguna parte: la semántica es la de un botón. Sin embargo, el diseñador puede haber especificado enlaces por razones de apariencia. Entonces esta es realmente una muy buena pregunta.
Shacker
17
Estoy usando un botón en lugar de un enlace porque al activar métodos JS con un enlace, me veo obligado a vincular para #luego usarlo event.preventDefault(). Eso es desagradable, como se está vinculando a javascript:void(0);.
Archonic

Respuestas:

351

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>

adardesign
fuente
24
Mi muy leve variación en el violín: moví la decoración de texto: regla de subrayado para actuar en el botón: desplazar. ver en mi violín bifurcado .
odedbd
10
Si no desea que todos los botones tengan el estilo de enlaces, fije el estilo con algo como button.link {...styles...}entonces <button class="link">Your button</button>. Esto también evita el uso !importantque siempre es una buena idea.
Archonic
3
Recuerda cuidar outline. Algunos navegadores lo agregan a los botones. Puedes configurar outline-color: transparent.
SiliconMind
44
Por favor, no elimine el esquema ya que eso haría que su botón fuera inaccesible: outlinenone.com
Dominik
44
En lugar de border-bottomusar text-decoration:underline.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
86

El código de la respuesta aceptada funciona para la mayoría de los casos, pero para obtener un botón que realmente se comporte como un enlace necesita un poco más de código. Es especialmente difícil obtener el estilo de los botones enfocados directamente en Firefox (Mozilla).

El siguiente CSS garantiza que los anclajes y botones tengan las mismas propiedades CSS y se comporten de la misma manera en todos los navegadores comunes:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

El ejemplo anterior solo modifica buttonelementos para mejorar la legibilidad, pero también se puede ampliar fácilmente para modificar input[type="button"], input[type="submit"]y input[type="reset"]elementos. También puede usar una clase, si desea que solo ciertos botones se vean como anclas.

Vea este JSFiddle para una demostración en vivo.

Tenga en cuenta también que esto aplica el estilo de anclaje predeterminado a los botones (por ejemplo, color de texto azul). Entonces, si desea cambiar el color del texto o cualquier otra cosa de los anclajes y botones, debe hacerlo después del CSS anterior.


El código original (ver fragmento) en esta respuesta era completamente diferente e incompleto.

Torben
fuente
¿Por qué necesita outline-offset: 0;si el esquema se establece en ninguno?
Mohamad
Tuve que agregar box-shadow: nonepara borrar todo el estilo en el botón
Tobbe
Otro:text-transform: none;
Shone Tow el
75

Si no le importa usar el programa de arranque de Twitter, le sugiero que simplemente use la clase de enlace .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Espero que esto ayude a alguien :) ¡Que tengas un buen día!

BoJack Horseman
fuente
77
Esto funcionó muy bien, pero dejó algo de relleno en lugar de un enlace <a> real. Simplemente agregue un estilo de relleno: 0! Importante y es dorado. ¡Gracias!
David
Esto parece desencadenar una validación de formulario con jquery validate
Paul Becker
Esta no es una solución confiable. No solo rompe sutilmente el centrado vertical, sino que deshabilita implícitamente el estilo del texto y los cambios de tamaño de fuente.
Radon Rosborough
5

intente usar la pseudoclase css :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edite en cuanto al uso de enlaces y eventos onclick (no debe usar controladores de eventos javascript en línea, pero en aras de la simplicidad los usaré aquí):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

con this.href puedes incluso acceder al objetivo del enlace en tu función. return falsesolo evitará que los navegadores sigan el enlace al hacer clic.

Si Javascript está desactivado el enlace funcionará como un enlace normal y sólo tiene que cargar some/page.php-si quiere que su enlace sea muerto cuando js es minusválidoshref="#"

knittl
fuente
Lo usaría, pero no estoy muy seguro de qué cambios aplicar para que el botón no se sangra.
Si. N incluso después de dar la paddina como 0 la indentación sigue siendo
4

No puede diseñar botones como enlaces de manera confiable en todos los navegadores. Lo he intentado, pero siempre hay algunos problemas extraños de relleno, margen o fuente en algún navegador. Vive dejando que el botón se vea como un botón, o usa onClick y preventDefault en un enlace.

Jacob Rask
fuente
2
Eso fue cierto cuando los navegadores usaban widgets nativos. ¿Sigue siendo cierto para algunos navegadores remotamente recientes?
aij
1
Es 2017 y mi FireFox todavía usa widgets nativos.
Michael Scheper el
2

Puede lograr esto usando CSS simple como se muestra en el siguiente ejemplo

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>

ingrese la descripción de la imagen aquí

GSB
fuente